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Preface 


The continuous growth of the computer software market leads to a very competitive and 
challenging era. Not only does your software need to be functional and easy to use, it must 
also look appealing and professional to the users. In order to gain an upper hand and a 
competitive advantage over other software products in the market, the look and feel of your 
product is of utmost importance and should be taken care of early in the production stage. In 
this book, we will teach you how to create a functional, appealing, and user friendly software 
using the Qt5 development platform. 


What this book covers 


Chapter 1, Look and Feel Customization, shows how to design your program's user interface 
using both the Qt Designer as well as the Qt Quick Designer. 


Chapter 2, States and Animations, explains how to animate your user interface widgets by 
empowering the state machine framework and the animation framework. 


Chapter 3, OPainter and 2D Graphics, covers how to draw vector shapes and bitmap images 
on screen using Qt's built-in classes. 


Chapter 4, OpenGL Implementation, demonstrates how to render 3D graphics in your program 
by integrating OpenGL in your Qt project. 


Chapter 5, Building a Touch Screen Application with Qt5, explains how to create a program 
that works on a touch screen device. 


Chapter 6, XML Parsing Made Easy, shows how to process data in the XML format and use it 
together with the Google Geocoding API to create a simple address finder. 


Chapter 7, Conversion Library, covers how to convert between different variable types, image 
formats, and video formats using Qt's built-in classes as well as third-party programs. 


www.it-ebooks.info 


Preface 


Chapter 8, Accessing Databases, explains how to connect your program to an SQL database 
using Qt. 


Chapter 9, Developing a Web Application Using Qt Web Engine, covers how to use the web 
rendering engine provided by Qt and develop programs that empower the web technology. 


What you need for this book 


The following are the prerequisites for this book: 


1.  Qt5 (for all chapters) 
2. FFmpeg (for Chapter 7, Conversion Library) 
3. XAMPP (for Chapter 8, Accessing Databases) 


Who this book is for 


This book intended for those who want to develop software using Qt5. If you want to improve 
the visual quality and content presentation of your software application, this book will suit 
you best. 


In this book, you will find several headings that appear frequently (Getting ready, How to do it, 
How it works, There's more, and See also). 


To give clear instructions on how to complete a recipe, we use these sections as follows: 


Getting ready 


This section tells you what to expect in the recipe, and describes how to set up any software or 
any preliminary settings required for the recipe. 


How to do it... 


This section contains the steps required to follow the recipe. 


This section usually consists of a detailed explanation of what happened in the previous 
section. 


[wi] 
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This section consists of additional information about the recipe in order to make the reader 
more knowledgeable about the recipe. 


See also 


This section provides helpful links to other useful information for the recipe. 


In this book, you will find a number of text styles that distinguish between different kinds of 
information. Here are some examples of these styles and an explanation of their meaning. 


Code words in text, database table names, folder names, filenames, file extensions, 
pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "In the 
mylabel .cpp source file, define a function called SetMyObject () to save the object 
pointer." 


A block of code is set as follows: 


OSpinBox: : down-button 

( 
image: url(:/images/spindown.png); 
subcontrol-origin: padding; 
subcontrol-position: right bottom; 


) 


When we wish to draw your attention to a particular part of a code block, the relevant lines or 
items are set in bold: 


OSpinBox: : down-button 

( 
image: url(:/images/spindown.png); 
subcontrol-origin: padding; 
subcontrol-position: right bottom; 


) 


New terms and important words are shown in bold. Words that you see on the screen, for 
example, in menus or dialog boxes, appear in the text like this: "Go to the Imports tab in the 
Library window and add a Qt Quick module called QtQuick.Controls to your project." 
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| SS Warnings or important notes appear in a box like this. ] 


Mz 
| Q Tips and tricks appear like this. ] 
Reader feedback 


Feedback from our readers is always welcome. Let us know what you think about this 
book—what you liked or disliked. Reader feedback is important for us as it helps us develop 
titles that you will really get the most out of. 


To send us general feedback, simply e-mail feedbackepacktpub. com, and mention the 
book's title in the subject of your message. 


If there is a topic that you have expertise in and you are interested in either writing or 
contributing to a book, see our author guide at www. packtpub.com/authors. 


Customer support 


Now that you are the proud owner of a Packt book, we have a number of things to help you to 
get the most from your purchase. 


Downloading the example code 


You can download the example code files for this book from your account at http: // 
www.packtpub. com. If you purchased this book elsewhere, you can visit http: / /www. 
packtpub.com/support and register to have the files e-mailed directly to you. 


You can download the code files by following these steps: 


1. Login or register to our website using your e-mail address and password. 
Hover the mouse pointer on the SUPPORT tab at the top. 

Click on Code Downloads €: Errata. 

Enter the name of the book in the Search box. 

Select the book for which you're looking to download the code files. 
Choose from the drop-down menu where you purchased this book from. 
Click on Code Download. 


E IS 
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You can also download the code files by clicking on the Code Files button on the book's 
webpage at the Packt Publishing website. This page can be accessed by entering the book's 
name in the Search box. Please note that you need to be logged in to your Packt account. 


Once the file is downloaded, please make sure that you unzip or extract the folder using the 
latest version of: 

» WINRAR / 7-Zip for Windows 

>»  Zipeg/ ¡Zip / UnRarX for Mac 

»  7-Zip/ PeaZip for Linux 
The code bundle for the book is also hosted on GitHub at https: //github.com/ 
PacktPublishing/Qt5-C-GUI-Programming-Cookbook. We also have other code 


bundles from our rich catalog of books and videos available at https: //github.com/ 
PacktPublishing/. Check them out! 


Downloading the color images of this book 


We also provide you with a PDF file that has color images of the screenshots/diagrams used 
in this book. The color images will help you better understand the changes in the output. 
You can download this file from http: //www.packtpub.com/sites/default/files/ 
downloads/Qt5CGUIProgrammingCookbook_ColorImages.pdf. 


Although we have taken every care to ensure the accuracy of our content, mistakes do happen. 
If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be 
grateful if you could report this to us. By doing so, you can save other readers from frustration 
and help us improve subsequent versions of this book. If you find any errata, please report 
them by visiting http: / /www.packtpub.com/submit-errata, selecting your book, 
clicking on the Errata Submission Form link, and entering the details of your errata. Once your 
errata are verified, your submission will be accepted and the errata will be uploaded to our 
website or added to any list of existing errata under the Errata section of that title. 


To view the previously submitted errata, go to https: / /www.packtpub.com/books/ 
content /support and enter the name of the book in the search field. The required 
information will appear under the Errata section. 
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Piracy of copyrighted material on the Internet is an ongoing problem across all media. At 
Packt, we take the protection of our copyright and licenses very seriously. If you come across 
any illegal copies of our works in any form on the Internet, please provide us with the location 
address or website name immediately so that we can pursue a remedy. 


Please contact us at copyrightepacktpub . com with a link to the suspected pirated material. 


We appreciate your help in protecting our authors and our ability to bring you valuable content. 


Ifyou have a problem with any aspect of this book, you can contact us at questionse 
packtpub. com, and we will do our best to address the problem. 
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Look and Feel 
Customization 


In this chapter we will cover the following recipes: 


» Using style sheets with Qt Designer 

» Basic style sheet customization 

» Creating a login screen using style sheets 
» Using resources in style sheets 

»  Customizing properties and sub-controls 
» Styling in QML 

»  Exposing QML object pointer to C++ 


Introduction 


Qt allows us to easily design our program's user interface through a method that most people 
are familiar with. Qt not only provides us with a powerful user interface toolkit called Qt 
Designer, which enables us to design our user interface without writing a single line of code, 
but it also allows advanced users to customize their user interface components through a 
simple scripting language called Qt Style Sheets. 
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Use style sheets with Qt Designer 


In this example, we will learn how to change the look and feel of our program and make it look 
more professional by using style sheets and resources. Qt allows you to decorate your Graphical 
User Interfaces (GUls) using a style sheet language called Qt Style Sheets, which is very similar 
to Cascading Style Sheets (CSS) used by web designers to decorate their websites. 


How to do it... 


1. 


The first thing we need to do is open up Qt Creator and create a new project. If this is 
the first time you have used Qt Creator, you can either click the big button that says 
New Project with a + sign, or simply go to File | New File or New Project. 


Then, select Application under the Project window and select Qt Widgets Application. 


After that, click the Choose button at the bottom. A window will then pop out and 
ask you to insert the project name and its location. 


Once you're done with that, click Next several times and click the Finish button 

to create the project. We will just stick to all the default settings for now. Once the 
project has been created, the first thing you will see is the panel with tons of big icons 
on the left side of the window that is called the Mode Selector panel; we will discuss 
this more later in the How ¡t works... section. 


Then, you will also see all your source files listed on the Side Bar panel which is 
located right next to the Mode Selector panel. This is where you can select which file 
you want to edit, which, in this case, is mainwindow.ui because we are about to 
start designing the program's Ul! 


Double-click mainwindow.ui and you will see an entirely different interface 
appearing out of nowhere. Qt Creator actually helped you to switch from the script 
editor to the Ul editor (Qt Designer) because it detected the .ui extension on the file 
you're trying to open. 


You will also notice that the highlighted button on the Mode Selector panel has 
changed from the Edit button to the Design button. You can switch back to the script 
editor or change to any other tools by clicking one of the buttons located in the upper 
half of the Mode Selector panel. 


Let's go back to the Qt Designer and look at the mainwindow.u1i file. This is basically 
the main window of our program (as the filename implies) and it's empty by default, 
without any widget on it. You can try to compile and run the program by pressing the 
Run button (green arrow button) at the bottom of the Mode Selector panel, and you 
will see an empty window popping up once the compilation is complete: 
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13. 
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Now, let's add a push button to our program's Ul by clicking on the Push Button 
item in the widget box (under the Buttons category) and dragging it to your main 
window in the form editor. Then, keep the push button selected, and now you will 
see all the properties of this button inside the property editor on the right side of 
your window. Scroll down to somewhere around the middle and look for a property 
called styleSheet. This is where you apply styles to your widget, which may or may 
not inherit to its children or grandchildren recursively depending on how you set your 
style sheet. Alternatively, you can also right-click on any widget in your Ul at the form 
editor and select Change Style Sheet from the pop-up menu. 


You can click on the input field of the styleSheet property to directly write the style 
sheet code, or click on the ... button besides the input field to open up the Edit Style 
Sheet window which has a bigger space for writing longer style sheet code. At the top 
of the window you can find several buttons, such as Add Resource, Add Gradient, 
Add Color, and Add Font, that can help you to kick-start your coding if you can't 
remember the properties' names. 


Let's try to do some simple styling with the Edit Style Sheet window. 


Click Add Color and choose color. 


Pick a random color from the color picker window, let's say, a pure red color. Then 
click OK. 


Now, you will see a line of code has been added to the text field on the Edit Style 
Sheet window, which in my case is as follows: 


color: rgb(255, 0, 0); 


Click the OK button and now you will see the text on your push button has changed to 
a red color. 
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Let's take a bit of time to get ourselves familiar with Qt Designer's interface before we start 
learning how to design our own UI: 


Y x 


file Edit Build Debug Analyze¡ Tools Window Help 


"xRARAM=»"ZI 


Object Class 

4 MainWindow QMainWindow 
ES centralWidget [1] QWidget 
menuBar QMenuBar 
mainToolBar QToolBar 
statusBar OStatusBar 


Spacers _*S 
[Pad] Horizontal Spacer 


Y E Vainas 


Debug 


Projects 
Analyze 
A A 
(9 Radio Button 
| Check Box 
"Ml Q Command... Button 
a. 


Help 


Receiver 


8 Tree View Horizontal Policy Preferre 
EE] Table View Vertical Policy Preferre 


(0 Column View Horizontal Stretch 
y | Action Editor | Signals 8 Slots Editor 


O EATRS + 27 > ER > CY + ETT ET ETT + 


1. Menu bar: The menu bar houses application-specific menus that provide easy access 
to essential functions such as create new projects, save files, undo, redo, copy, paste, 
and so on. It also allows you to access development tools that come with Qt Creator, 
such as the compiler, debugger, profiler, and so on. 


2. Widget box: This is where you can find all the different types of widget provided by 
Qt Designer. You can add a widget to your program's Ul by clicking one of the widgets 
from the widget box and dragging it to the form editor. 


3. Mode selector: The mode selector is a side panel that places shortcut buttons for 
easy access to different tools. You can quickly switch between the script editor and 
form editor by clicking the Edit or Design buttons on the mode selector panel which 
is very useful for multitasking. You can also easily navigate to the debugger and 
profiler tools in the same speed and manner. 


4. Build shortcuts: The build shortcuts are located at the bottom of the mode selector 
panel. You can build, run, and debug your project easily by pressing the shortcut 
buttons here. 
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5. Form editor: Form editor is where you edit your program's Ul. You can add different 
widgets to your program by selecting a widget from the widget box and dragging it to 
the form editor. 


6. Form toolbar: From here, you can quickly select a different form to edit, click the 
drop-down box located above the widget box and select the file you want to open with 
Qt Designer. Beside the drop-down box are buttons for switching between different 
modes for the form editor and also buttons for changing the layout of your Ul. 


7. Object inspector: The object inspector lists all the widgets within your current .ui 
file. All the widgets are arranged according to its parent-child relationship in the 
hierarchy. You can select a widget from the object inspector to display its properties 
in the property editor. 


8. Property editor: Property editor will display all the properties of the widget you 
selected either from the object inspector window or the form editor window. 


9. Action Editor and Signals é: Slots Editor: This wndow contains two editors, Action 
Editor and the Signals é: Slots Editor, which can be accessed from the tabs below 
the window. The action editor is where you create actions that can be added to a 
menu bar or toolbar in your program's Ul. 


10. Output panes: Output panes consist of several different windows that display 
information and output messages related to script compilation and debugging. You 
can switch between different output panes by pressing the buttons that carry a 
number before them, such as 1-Issues, 2-Search Results, 3-Application Output, 
and so on. 


In the previous section, we discussed how to apply style sheets to Qt widgets through C++ 
coding. Although that method works really well, most of the time the person who is in charge 
of designing the program's Ul is not the programmer, but a Ul designer who specializes in 
designing user-friendly Ul. In this case, ¡it's better to let the Ul designer design the program's 
layout and style sheet with a different tool and not mess around with the code. 


Qt provides an all-in-one editor called Qt Creator. Qt Creator consists of several different tools, 
such as script editor, compiler, debugger, profiler, and Ul editor. The Ul editor, which is also 
called Qt Designer, is the perfect tool for designers to design their program's Ul without writing 
any code. This is because Qt Designer adopted the What-You-See-lIs-WhatYou-Get approach by 
providing accurate visual representation of the final result, which means whatever you design 
with Qt Designer will turn out exactly the same when the program is compiled and run. 
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The similarities between Qt Style Sheets and CSS are as follows: 


» CSS:h1 [ color: red; background-color: white;) 
»  QtStyle Sheets: QLineEdit [ color: red; background-color: white;) 


»  Asyou can see, both of them contain a selector and a declaration block. Each 
declaration contains a property and a value, separated by a colon. 


» In Qt, a style sheet can be applied to a single widget by calling 
QO0bject : :setStyleSheet () function in C++ code, for example: 


myPushButton->setStyleSheet ("color : blue"); 


» The preceding code will turn the text of a button with the variable name 
myPushButton to a blue color. You can also achieve the same result by writing 
the declaration in the style sheet property field in Qt Designer. We will discuss more 
about Qt Designer in the next section. 


» Qt Style Sheets also supports all the different types of selectors defined in CSS2 
standard, including Universal selector, Type selector, Class selector, ID selector, and 
so on, which allows us to apply styling to a very specific individual or group of widgets. 
For instance, if we want to change the background color of a specific line edit widget 
with the object name usernameEdit, we can do this by using an ID selector to refer 
to it: 


OLineEditHtusernameEdit [ background-color: blue ) 


<= To learn about all the selectors available in CSS2 (which are also supported 
Ss by Qt Style Sheets), please refer to this document: http: / /www.w3 .org/ 
TR/REC-CSS2/selector.html. 


Basic style sheet customization 


In the previous example, you learned how to apply a style sheet to a widget with Qt Designer. 
Let's go crazy and push things further by creating a few other types of widgets and change 
their style properties to something bizarre for the sake of learning. This time, however, we will 
not apply the style to every single widget one by one, but we will learn to apply the style sheet 
to the main window and let it inherit down the hierarchy to all the other widgets so that the 
style sheet is easier to manage and maintain in long run. 


How to do it... 


1. First of all, let's remove the style sheet from the push button by selecting it and 
clicking the small arrow button besides the stylesSsheet property. This button will 
revert the property to the default value, which in this case is the empty style sheet. 
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2. Then, add a few more widgets to the Ul by dragging them one by one from the widget 
box to the form editor. l've added a line edit, combo box, horizontal slider, radio 
button, and a check box. 


3. Forthe sake of simplicity, delete the menu bar, main toolbar, and the status bar from 
your Ul by selecting them from the object inspector, right click, and choose Remove. 
Now your Ul should look similar to this: 


" n ” 
PushButton 
Hello 
New Item y 
RadioButton 
. . 
E] CheckBox 
" - " 


4. Select the main window either from the form editor or the object inspector, then right 
click and choose Change Stylesheet to open up the Edit Style Sheet. 


Insert the following style sheet: 


border: 2px solid gray; 
border-radius: 10px; 
padding: 0 8px; 
background: yellow; 


5. Now what you will see is a completely bizarre-looking Ul with everything covered in 
yellow with a thick border. This is because the preceding style sheet does not have a 
selector, which means the style will apply to the children widgets of the main window 
all the way down the hierarchy. To change that, let's try something different: 


QPushButton 

( 
border: 2px solid gray; 
border-radius: 10px; 
padding: 0 8px; 
background: yellow; 
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6. This time, only the push button will get the style described in the preceding code, and 
all other widgets will return to the default styling. You can try to add a few more push 
buttons to your Ul and they will all look the same: 


" " " 
Hello 
New Item Y 
RadioButton 
" 0] 
[7] CchedkBox 
" " " 


7. This happens because we specifically tell the selector to apply the style to all the 
widgets with the class called OPushButton. We can also apply the style to just one 
of the push buttons by mentioning its name in the style sheet, like so: 


OPushButtontpushButton_3 
( 
border: 2px solid gray; 
border-radius: 10px; 
padding: 0 8px; 
background: yellow; 


) 


8. Once you understand this method, we can add the following code to the style sheet : 
QPushButton 


( 
color: red; 
border: 0px; 
padding: 0 8px; 
background: white; 


QPushButtontfpushButton_2 


( 


border: lpx solid red; 
border-radius: 10px; 
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OPushButtontpushButton_3 
( 
border: 2px solid gray; 
border-radius: 10px; 
padding: 0 8px; 
background: yellow; 


) 


9. What it does is basically change the style of all the push buttons as well as some 
properties of a specific button named pushButton_2. We keep the style sheet of 
pushButton_3 asit is. Now the buttons will look like this: 


" " " 
PushButton PushButton (Pushutton ) 
Hello 
New Item Y 
_) RadioButton 
”. " 
|_] CheckBox 
" " ] 


10. The first set of style sheet will change all widgets of OPushButton type to a white 
rectangular button with no border and red text. Then the second set of style sheet 
changes only the border of a specific OPushButton widget called pushButton_2. 
Notice that the background color and text color of pushButton_2 remain white and 
red respectively because we didn't override them in the second set of style sheet, 
hence it will return to the style described in the first set of style sheet since it's 
applicable to all OPushButton widgets. Do notice that the text of the third button 
has also changed to red because we didn't describe the color property in the third set 
of style sheet. 


11. After that, create another set of style using the universal selector, like so: 


* 


( 
background: gradialgradient (cx: 0.3, Cy: -0.4, fx: 0.3, 
fy: -0.4, radius: 1.35, stop: O Hfff, stop: 1 +888); 
color: rgb(255, 255, 255); 
border: lpx solid H£fffff; 
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12. The universal selector will affect all the widgets regardless of their type. Therefore, 
the preceding style sheet will apply a nice gradient color to all the widgets' 
background as well as setting their text as white and giving them a one-pixel solid 
outline which is also in white. Instead of writing the name of the color (that is, white), 
we can also use the rgb function (rgb(255, 255, 255)) or hex code (H£f£fff£f) 
to describe the color value. 


13. Just as before, the preceding style sheet will not affect the push buttons because 
we have already given them their own styles which will override the general style 
described in the universal selector. Just remember that in Qt, the style that is more 
specific will ultimately be used when there is more than one style having influence on 
a widget. This is how the Ul will look now: 


. 
na E 
[New Ttem [Y 


If you are ever involved in web development using HTML and CSS, Qt's style sheet works 
exactly the same way as CSS. Style sheets provide the definitions for describing the 
presentation of the widgets - what the colors are for each element in the widget group, 
how thick the border should be, and so on and so forth. 


If you specify the name of the widget to the style sheet, it will change the style of a particular 
push button widget with the name you provide. None of the other widgets will be affected and 
will remain as the default style. 


To change the name of a widget, select the widget either from the form editor or the object 
inspector and change the property called objectName in the property window. If you have 
used the ID selector previously to change the style of the widget, changing its object name will 
break the style sheet and lose the style. To fix this problem, simply change the object name in 
the style sheet as well. 
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Creating a login screen using style sheets 


Next, we will learn how to put all the knowledge we learned in the previous example together 
and create a fake graphical login screen for an imaginary operating system. Style sheets are 
not the only thing you need to master in order to design a good Ul. You will also need to learn 
how to arrange the widgets neatly using the layout system in Qt Designer. 


How to do it... 


1. 


The first thing we need to do is design the layout of the graphical login screen before 
we start doing anything. Planning is very important in order to produce good software. 
The following is a sample layout design | made to show you how | imagine the login 
screen will look. Just a simple line drawing like this is sufficient as long as it conveys 
the message clearly: 


Monday, 25-10-2015 3:14 PM 


MyOS Logo 


ogame: bo] 


Panor bo] 


Now that we know exactly how the login screen should look, let's go back to Qt 
Designer again. 


We will be placing the widgets at the top panel first, then the logo and the login 
form below it. 


Select the main window and change its width and height from 400 and 300 to 800 
and 600 respectively because we'll need a bigger space in which to place all the 
widgets in a moment. 


Click and drag a label under the Display Widgets category from the widget box to the 
form editor. 


Change the objectName property of the label to currentDateTime and change 
its Text property to the current date and time just for display purposes, such as 
Monday, 25-10-2015 3:14 PM. 


[11] 
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7. 


10. 


11. 


12. 


13. 


14. 


Click and drag a push button under the Buttons category to the form editor. Repeat 
this process one more time because we have two buttons on the top panel. Rename 
the two buttons restartButton and shutdownButton respectively. 


Next, select the main window and click the small icon button on the form toolbar 
that says Lay Out Vertically when you mouse-over it. Now you will see the widgets 
are being automatically arranged on the main window, but it's not exactly what we 
want yet. 


Click and drag a horizontal layout widget under the Layouts category to the main 
window. 


Click and drag the two push buttons and the text label into the horizontal layout. Now 
you will see the three widgets being arranged in a horizontal row, but vertically they 
are located in the middle of the screen. The horizontal arrangement is almost correct, 
but the vertical position is totally off. 


Click and drag a vertical spacer from the Spacers category and place it below the 
horizontal layout we created previously (below the red rectangular outline). Now you 
will see all the widgets are being pushed to the top by the spacer. 


Now, place a horizontal spacer between the text label and the two buttons to keep 
them apart. This will make the text label always stick to the left and the buttons align 
to the right. 


Set both the Horizontal Policy and Vertical Policy properties of the two 
buttons to Fixed and set the minimumSi ze property to 55x55. Then, set the text 
property of the buttons to empty as we will be using icons instead of text. We will 
learn how to place an icon in the button widgets in the following section. 


Now your Ul should look similar to this: 


Monday, 25-10-2015 3:14 PM a | 


sua] 


Next, we will be adding the logo by using the following steps: 


1. 


Add a horizontal layout between the top panel and the vertical spacer to serve as a 
container for the logo. 


After adding the horizontal layout, you will find the layout is way too thin in height to 
be able to add any widgets to it. This is because the layout is empty and it's being 
pushed by the vertical spacer below it into zero height. To solve this problem, we can 
set its vertical margin (either layoutTopMargin or layoutBottomMargin)to be 
temporarily bigger until a widget is added to the layout. 
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3. Next, add a label to the horizontal layout that you just created and rename it 1ogo. 
We will learn more about how to insert an image into the label to use it as a logo 
in the next section. For now, just empty out the text property and set both its 
Horizontal Policy and Vertical Policy properties to Fixed. Then, set 
the minimumSi ze property to 150x150. 
Set the vertical margin of the layout back to zero if you haven't done so. 

5. The logo now looks invisible, so we will just place a temporary style sheet to make it 
visible until we add an image to it in the next section. The style sheet is really simple: 


border: 1lpx solid; 


6. Now your Ul should look similar to this: 


Monday, 25-10-2015 3:14 PM Jana aaa 


posa] 


Now let's create the login form by using the following steps: 


1. Add a horizontal layout between the logo's layout and the vertical spacer. Just as we 
did previously, set the layoutTopMargin property to a bigger number (that is, 100) 
so that you can add a widget to it more easily. 


2. After that, add a vertical layout inside the horizontal layout you just created. This 
layout will be used as a container for the login form. Set its layout TopMargin to 
a number lower than that of the horizontal layout (that is, 20) so that we can place 
widgets in it. 


3. Next, right click the vertical layout you just created and choose Morph into -> 
QWidget. The vertical layout is now being converted into an empty widget. This 
step is essential because we will be adjusting the width and height of the container 
for the login form. A layout widget does not contain any properties for width and 
height, but only margins, due to the fact that a layout will expand toward the empty 
space surrounding it, which does make sense, considering that it does not have 
any size properties. After you have converted the layout to a QWidget object, it will 
automatically inherit all the properties from the widget class, and so we are now able 
to adjust its size to suit our needs. 


113] 
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4. Rename the QWidget object, which we just converted from the layout, to 1oginForm 
and change both its Horizontal Policy and Vertical Policy properties to 
Fixed. Then, set the minimumSize to 350x200. 

5. Since we already placed the 1oginForm widget inside the horizontal layout, we can 
now set its layout TopMargin property back to zero. 

6. Add the same style sheet as the logo to the 1oginForm widget to make it visible 
temporarily, except this time we need to add an ID selector in front so that it will 
only apply the style to 10oginForm and not its children widgets: 
tloginForm [ border: lpx solid; ) 

7. Now your Ul should look something like this: 

Monday, 25-10-2015 3: 14 PM VE A | 


o 
pasao] 
o 


We are not done with the login form yet. Now that we have created the container for the login 
form, it's time to put more widgets into the form: 


1. 


Place two horizontal layouts into the login form container. We need two layouts as one 
for the username field and another for the password field. 


Add a label and a line edit to each of the layouts you just added. Change the text 
property of the upper label to Username : and the one below as Password :. Then, 
rename the two line edits as username and password respectively. 


Add a push button below the password layout and change its text property to 
Login. After that, rename it as loginButton. 
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You can add a vertical spacer between the password layout and the login button 
to distance them slightly. After the vertical spacer has been placed, change its 
sizeType property to Fixed and change the Height to 5. 


Now, select the 1oginForm container and set all its margins to 35. This is to make 
the login form look better by adding some space to all its sides. 


You can also set the Height property of the username, password, and 
loginButton widgets to 25 so that they don't look so cramped. 


Now your Ul should look something like this: 


Monday, 25-10-2015 3:14 PM Va AAA 


Username: 


Password: 


proa] 


We're not done yet! As you can see, the login form and the logo are both sticking to the top of 
the main window due to the vertical spacer below them. The logo and the login form should 
be placed at the center of the main window instead of the top. To fix this problem, use the 
following steps: 


1. 


Add another vertical spacer between the top panel and the logo's layout. This way it 
will counter the spacer at the bottom which balances out the alignment. 


If you think that the logo is sticking too close to the login form, you can also add 
a vertical spacer between the logo's layout and the login form's layout. Set its 
sizeType property to Fixed and the Height property to 10. 


Right click the top panel's layout and choose Morph into -> QWidget. Then, rename 
it topPanel. The reason why the layout has to be converted into QWidget is that, 
we cannot apply style sheets to a layout, as it doesn't have any properties other 
than margins. 


[15] 
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4. 


Currently you can see there is a little bit of margin around the edges of the main 
window - we don't want that. To remove the margins, select the centralWidget 
object from the object inspector window, which is right under the MainWindow panel, 
and set all the margin values to zero. 


At this point, you can run the project by clicking the Run button (with the green arrow 
icon) to see what your program looks like now. If everything went well, you should 
see something like this: 


Monday, 25-10-2015 3: 14 PM 


Username: 


Password: 


After we've done the layout, it's time for us to add some fanciness to the Ul using style 
sheets! Since all the important widgets have been given an object name, it's easier 
for us to apply the style sheets to it from the main window, since we will only write the 
style sheets to the main window and let them inherit down the hierarchy tree. 


Right click on MainWindow from the object inspector window and choose Change 
Stylesheet. 


Add the following code to the style sheet: 
HkcentralWidget [ background: rgba(32, 80, 96, 100); ) 
Now you will see that the background of the main window changes its color. We will 


learn how to use an image for the background in the next section, so the color is 
just temporary. 


www.it-ebooks.info 


Chapter 1 


10. In Qt, if you want to apply styles to the main window itself, you must apply it to 
its central widget instead of the main window itself because the window is just 
a container. 
11. Then, we will add a nice gradient color to the top panel: 
HtopPanel ([ background-color: 
alineargradient (spread:reflect, x1:0.5, y1:0, x2:0, y2:0, 
stop:0 rgba(91, 204, 233, 100), stop:1 rgba(32, 80, 96, 
100)); ) 


12. After that, we will apply black color to the login form and make it look semi-transparent. 
After that, we will also make the corners of the login form container slightly rounded by 
setting the border-radius property: 


HloginForm 


( 
background: rgba(0, 0, 0, 80); 
border-radius: 8px; 


J 


13. After we're done applying styles to the specific widgets, we will apply styles to the 
general types of widgets instead: 
OLabel [ color: white; ) 
OLineEdit ([( border-radius: 3px; ) 


14. The preceding style sheets will change all the labels' texts to a white color, which 
includes the text on the widgets as well because, internally, Qt uses the same type 
of label on the widgets that have text on it. Also, we made the corners of the line 
edit widgets slightly rounded. 


15. Next, we will apply style sheets to all the push buttons on our Ul: 
QPushButton 


( 


color: white; 
background-color: H27a9e3; 
border-width: 0px; 
border-radius: 3px; 


) 


16. The preceding style sheet changes the text of all the buttons to a white color, then 
sets its background color to blue, and makes its corners slightly rounded as well. 


17. To push things even further, we will change the color of the push buttons when we 
mouse-over it, using the keyword hover: 


OPushButton:hover [ background-color: +*66c011; ) 
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18. The preceding style sheet will change the background color of the push buttons to 
green when we mouse-over them. We will talk more about this in the following section. 


19. You can further adjust the size and margins of the widgets to make them look even 
better. Remember to remove the border line of the login form by removing the style 
sheet that we applied directly to it earlier. 


20. Now your login screen should look something like this: 


25-10-2015 3:14 PM 


This example focuses more on the layout system of Qt. The Qt layout system provides a simple 
and powerful way of automatically arranging child widgets within a widget to ensure that they 
make good use of the available space. 


The spacer items used in the preceding example help to push the widgets contained in a 
layout outward to create spacing along the width of the spacer item. To locate a widget to the 
middle of the layout, put two spacer items to the layout, one on the left side of the widget and 
another on the right side of the widget. The widget will then be pushed to the middle of the 
layout by the two spacers. 
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Using resources in style sheets 


Qt provides us with a platform-independent resource system which allows us to store any type 
of files in our program's executable for later use. There is no limit to the types of files we can 
store in our executable—images, audio, video HTML, XML, text files, binary files, and so on, 
are all permitted. This is useful if your application always needs a certain set of files (icons, 
translation files, and so on) and you don't want to run the risk of losing the files. To achieve 
this, we must tell Qt which files we want to add to ¡ts resource system in the . gra file and 

Qt will handle the rest during the build process. 


How to do it 


To add a new .qra file to our project, go to File | New File or Project. Then, select Qt under 
the Files and Classes category and select Qt Resources File. After that, give it a name (that 
is, resources) and click the Next button followed by the Finish button. The . gra file will not 
be created and automatically opened by Qt Creator. 


You don't have to edit the . qra file directly in the XML format as Qt Creator provides you the 
user interface to manage your resources. To add images and icons to your project, first you 
need to make sure that the images and icons are being placed in your project's directory. 


While the . gra file is opened in Qt Creator, click the Add button followed by Add Prefix 
button. The prefix is used to categorize your resources so that it can be better managed 
when you have a ton of resources in your project: 


Rename the prefix you just created /icons. 

Then, create another prefix by clicking Add followed by Add Prefix. 
Rename the new prefix / images. 

After that, select the /icon prefix and click Add followed by Add Files. 


Afile selection window will appear; use that to select all the icon files. You can select 
multiple files at a time by holding the Ctrl key on your keyboard while clicking on the 
files to select them. Click Open once you're done. 


6. Then, selectthe /images prefix and click the Add button followed by the Add Files 
button. The file selection window will pop up again, and this time we will select the 
background image. 


N3¿ PO», 
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7. 


8. 


10. 


11. 


12. 


13. 


Repeat the preceding steps, but this time we will add the logo image to the 
/images prefix. 


Don't forget to save once you're done by pressing Ctrl + S. Your . qra file should now 


look like this: 
4 — ficons 


restart_icon.png 
shutdown_icon.png 
4 5 /images 
EA login_bg.png 
logo.png 


After that, open back to our mainwindow.ui file; we will now make use of the 
resources we have just added to our project. First, we will select the restart button 
located on the top panel. Then, scroll down the property editor until you see the 
icon property. Click the little button with a drop-down arrow icon and click Choose 
Resources from its menu. 


The Select Resource window will then pop up. Click on the icons prefix on the left 
panel and then select the restart icon on the right panel. After that, press OK. 


You will now see a tiny icon appearing on the button. The icon looks very tiny 
because the default icon size is set at 16x16. Change the iconSize property 
to 50x50 and you will see the icon appear bigger now. 


Repeat the preceding steps for the shutdown button, except this time we will choose 
the shutdown icon instead. 


Once you're done, the two buttons should now look like this: 


TEN £) f 0 ) 


Next, we will use the image we added to the resource file as our logo. First, select the 
logo widget and remove the style sheet that we added earlier to render its outline. 


Scroll down the property editor until you see the pixmap property. 
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14. 


15. 


16. 


17. 


Click the little drop-down button behind the pixmap property and select Choose 
Resources from the menu. After that, select the logo image and click OK. You will 
now see the logo size no longer follow the dimension you set previously and follow the 
actual dimension of the image instead. We cannot change its dimension because this 
is simply how pixmap works. 

If you want more control over the logo's dimension, you can remove the image from 
the pixmap property and use a style sheet instead. You can use the following code to 
apply an image to the icon container: 


border-image: url(:/images/logo.png); 


To obtain the path of the image, right click the image name on the file list window 
and choose Copy path. The path will be saved to your operating system clipboard and 
now you can just paste it to the preceding style sheet. Using this method will ensure 
that the image fits exactly the dimension of the widget that you applied the style to. 
Your logo should now appear like so: 


Lastly, we will apply the wallpaper image to the background using a style sheet. 
Since the background dimension will change according to the window size, we 
cannot use pixmap in this case. Instead, we will use the border - image property 
in a style sheet to achieve this. Right click the main window and select Change 
styleSheet to open up the Edit Style Sheet window. We will add a new line under 
the style sheet of the central widget: 


HcentralWidget 


( 


background: rgba(32, 80, 96, 100); 
border-image: url(:/images/login bg.png); 


) 
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18. It's really that simple and easy! Your login screen should now look like this: 


The resource system in Qt stores binary files, such as images, translation files, and so on, 
in the executable when it gets compiled. It reads the resource collection files (. gre) in your 
project to locate the files that need to be stored in the executable and include them into the 
build process. A .qra file looks something like this: 


<!DOCTYPE RCC><RCC version="1.0"> 
<qresource> 
<file>images/copy.png</file> 
<file>images/cut .png</file> 
<file>images/new.png</file> 
<file>images/open.png</file> 
<file>images/paste.png</file> 
<file>images/save.png</file> 
</qresource> 
</RCC> 


It uses XML format to store the paths of the resource files which are relative to the directory 
containing it. Do note that the listed resource files must be located in the same directory as 
the .qra file, or one of its sub-directories. 
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Customizing properties and sub-controls 


Qt's style sheet system enables us to create stunning and professional-looking Uls with ease. 


In this example, we will learn how to set custom properties to our widgets and use them to 
switch between different styles. 


How to do it... 


1. Let's try out the scenario described in the preceding paragraph by creating a new Qt 
project. | have prepared the Ul for this purpose. The Ul contains three buttons on the 


left side and a tab widget with three pages located at the right side, as shown in the 
following screenshot: 


o = E —a 
Pagel | Page2 | Page 3 


2. Thethree buttons are blue in color because l've added the following style 
sheet to the main window (not to the individual button): 
QPushButton 
( 
color: white; 
background-color: H27a9e3; 
border-width: 0px; 
border-radius: 3px; 
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3. Next, | will explain to you what pseudo states are in Qt by adding the following style 
sheet to the main window, which you might be familiar with: 


QPushButton:hover 

( 
color: white; 
background-color: H66c011; 
border-width: 0px; 
border-radius: 3px; 


] 


4. We used the preceding style sheet in the previous tutorial to make the buttons change 
color when there is a mouse-over. This is made possible by Qt Style Sheet's pseudo 
state, which in this case is the word hover separated from the OPushButton 
class by a colon. Every widget has a set of generic pseudo states, such as active, 
disabled, enabled, and so on, and also a set of pseudo states which are applicable 
to their widget type. For example, states such as open and flat are available for 
OPushButton, but not for QLineEdit. Let's add the pressed pseudo state to 
change the buttons' color to yellow when the user clicks on it: 


OPushButton:pressed 

( 
color: white; 
background-color: yellow; 
border-width: 0px; 
border-radius: 3px; 


) 


5. Pseudo states allow the users to load a different set of style sheet based on the 
condition that applies to it. Qt pushes this concept further by implementing dynamic 
properties in Qt Style Sheets. This allows us to change the style sheet of a widget 
when a custom condition has been met. We can make use of this feature to change 
the style sheet of our buttons based on a custom condition that we can set using 
custom properties in Qt. 


First, we will add this style sheet to our main window: 


OPushButton [pagematches=truel 
( 
color: white; 
background-color: red; 
border-width: 0px; 
border-radius: 3px; 
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What it does is basically change the push button's background color to red if the 
property called pagematches returns true. Obviously, this property does not 
exist in the OPushButton class. However, we can add it to our buttons by using 
QO0bject: :setProperty (): 


|] 


In your MainWindow.cpp source code, add the following code right after 
ui->setupui (this);: 


ui->buttonl->setProperty ("pagematches", true); 


The preceding code will add a custom property called pagematches to the 
first button and set its value as true. This will make the first button turn red 
by default. 


After that, right click on the tab widget and choose Go to slot. A window will 
then pop up; select the currentChanged(int) option from the list and click 
Ok. Qt will generate a s1ot function for you, which looks something like this: 


private slots: 
void on tabWidget_currentChanged (int index); 


The slot function will be called whenever we change page of the tab widget. 
We can then decide what we want itto do by adding our code into the 

slot function. To do that, open Up mainwindow.cpp and you will see 

the function's declaration there. Let's add some code to the function: 


void MainWindow::on tabWidget_currentChanged (int index) 
// Set all buttons to false 
ui->buttonl->setProperty ("pagematches", false); 
ui->button2->setProperty ("pagematches", false); 
ui->button3->setProperty ("pagematches", false); 


// Set one of the buttons to true 
if (index == 0) 


ui->buttonl->setProperty ("pagematches", true); 
else if (index == 1) 

ui->button2->setProperty ("pagematches", true); 
else 

ui->button3->setProperty ("pagematches", true); 


// Update buttons style 

ui->buttonl->style () ->polish (ui->button1)'; 
ui->button2->style () - >polish (ui->button2); 
ui->button3->style () ->polish (ui->button3); 
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7. The preceding code basically does this: when the tab widget switches its current 
page, it sets the pagematches properties of all three buttons to false. Just be 
sure to reset everything before we decide which button should change to red. 


8. Then, check the index variable supplied by the event signal, which will tell you the 
index number of the current page. Set the pagematches property of one of the 
buttons to true based on the index number. 


9.  Lastly, refresh the style of all three buttons by calling polish(). 


Then, build and run the project. You should now see the three buttons changing their 
color to red whenever you switch the tab widget to a different page. Also, the buttons 
will change color to green when there is a mouse-over, as well as change their color 
to yellow when you click on them: 


Page 1 Page 2 Page 3 


Qt provides users the freedom of adding their own custom properties to any type of widget. 
Custom properties are very useful if you want to change a particular widget when a special 
condition is met, where Qt doesn't provide such a context by default. This allows the user to 
extend the usability of Qt and makes it a flexible tool for customized solutions. 


For example, if we have a row of buttons on our main window and we need one of them 
to change its color depending on which page the tab widget is currently showing, then 
there is no way the buttons would know when they should change their color, because Qt 
itself has no built-in context for this type of situation. To solve this issue, Qt provides us a 
method to add our own properties to the widgets, which is using a generic function called 
QObject : :setProperty (). To read the custom property, we can use another function 
called Q0bject : : property (). 
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Next, we will talk about sub-controls in Qt Style Sheets. It's actually quite self-explanatory by 
looking at the term sub-controls. Often, a widget is not just a single object but a combination 
of more than one object or control in order to form a more complex widget, and such objects 
are called sub-controls. 


For example, a spin box widget contains an input field, a down button, an up button, an up 
arrow, and a down arrow, which ¡is quite complicated compared to some other widgets. In this 
case, Qt grants us more flexibility by allowing us to change every single sub-control using a 
style sheet, if we wanted to. We can do so by specifying the name of the sub-control behind 
the widget's class name, separated by a double colon. For instance, if | want to change the 
image of the down button in a spin box, | can write my style sheet like this: 


OSpinBox: : down-button 

( 
image: url(:/images/spindown.png); 
subcontrol-origin: padding; 
subcontrol-position: right bottom; 


) 


That will only apply the image to the down button of my spin box, and not to any other parts of 
the widget. 


By combining custom properties, pseudo states, and sub-controls, Qt provides us with a very 
flexible method to customize our user interface. 


Visit the following link to learn more about pseudo states and sub- 
Le controls in Qt: 


http://doc.qt.io/qt-4.8/stylesheet-reference.html 


Qt Meta Language or Qt Modeling Language (QMIL) is a Javascript-inspired user interface 
mark-up language used by Qt for designing user interfaces. Qt provides you with Qt Quick 
components (widgets powered by the QML technology) to easily design touch-friendly 

Ul without C++ programming. We will learn more about how to use QML and Qt Quick 
components to design our program's Ul by following the steps given in the following section. 


How to do it... 


1. Create a new project by going to File | New File or Project. Select Application under 
Project category and choose Qt Quick Application. 


Sy 


2. Press the Choose button, and that will bring you to the next window. Insert a name for 
your project and click the Next button again. 
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3. 


Another window will now appear and ask you to choose a minimum required Qt 
version. Pick the latest version installed on your computer and click Next. 


After that, click Next again followed by Finish. Qt Creator will now create a new 
project for you. 


Once the project is being created, you will see there are some differences compare 
to a C++ Qt project. You will see two .qml files, namely main.qml and MainForm. 
ui.qml, inside the project resource. These two files are the Ul description files using 
the QML mark-up language. If you double click main. qml file, Qt Creator will open up 
the script editor and you will see something like this: 


import OtQuick 2.5 
import OtQuick.Window 2.2 


Window ( 
visible: true 
MainForm ( 
anchors.fill: parent 
mouseArea.onClicked: ( 
Ot .quit (); 
) 
) 
) 


This file basically tells Qt to create a window and insert a set of Ul called MainForm 
which is actually from the other . qml1 file called MainForm.ui .qml. It also tells Qt 
that when the user clicks on the mouseArea widget, the entire program should be 
terminated. 


Now, try to open the MainForm.ui.qml file by double-clicking on it. This time, Qt 
Designer (Ul editor) will be opened instead, and you will see a completely different Ul 
editor compared to the C++ project we did previously. This editor is also called the Qt 
Quick Designer, specially designed for editing QML-based Ul only. 


If you open up the main. cpp file in your project, you will see this line of code: 
Q00mlApplicationEngine engine; 


engine.load(QUrl (QStringlLiteral ("grc:/main.qml"))); 


The preceding code basically tells Qt's QML engine to load the main. qml file when 
the program starts. If you want to load the other .qml file instead of main. qml, you 
know where to look for the code. 
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10. 


11. 


12. 


When main.qml is loaded by the QML engine, it will also import MainForm. 

ui .qml into the Ul, since MainForm is being called in the main. qml file. Qt will 
check if MainForm is a valid Ul by searching for its . qm1 file based on the naming 
convention. Basically the concept is similar to the C++ project we did in the previous 
section, whereby the main. qml file acts like the main. cpp file and MainForm. 
ui.qml acts like the MainWindow class. You can also create other Ul templates and 
use them in main. qm1. Hopefully this comparison will make it easier to understand 
how QML works. 


Now let's open Up MainForm.ui .qml. You should see three items listed on 
the navigator window: Rectangle, mouseArea, and Text. When these items are 
interpreted by the QML engine, it produces the following result on the canvas: 


PAI AAA AAA AAA ANA AA AAA AAA AA AAA AAA 


23/y35sn ou 


SS 


SS 


Hello World 


SS 


A 
A 
A 
A 
4 


The Rectangle item is basically the base layout of the window, which cannot be 
deleted. It is similar to the centralWidget we used in the previous section. The 
mouseArea ¡tem is an invincible item that gets triggered when the mouse is clicking 
on it, or when a finger is touching it (for mobile platforms). The mouse area ¡is also 
used in a button component, which we will be using in a while. The Text component is 
self-explanatory: it is a label that displays a block of text on the application. 
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13. 


14. 


15. 


16. 


On the Navigator window, we can hide or show an item by clicking on the icon 
besides the item which resembles an eye. When an item is hidden, it will not show on 
the canvas nor the compiled application. Just like the widgets in a C++ Qt project, Qt 
Quick components are arranged in a hierarchy based on the parent-child relationship. 
All the children items will be placed below the parent item with an indented position. 
In our case, you can see the mouseaArea and Text items are all positioned slightly 

to the right compared to the Rectangle item, because they are both the children of 
the Rectangle item. We can re-arrange the parent-child relationship as well as their 
position in the hierarchy by using a click-and-drag method from the navigator window. 
You can try clicking on the Text item and dragging it on top of mouseArea. You will 
then see the Text item changes its position and is now located below the mouseArea 
with a wider indentation: 


Navigator "EDJ?> 


Rectangle 


mouseÁrea 
Tedt 


We can also re-arrange them by using the arrow buttons located on top of the 
navigator window, as shown in the preceding screenshot. Anything that happens to 
the parent item will also affect all its children, such as moving the parent item, hide 
and show the parent item, and so on. 


You can pan around the canvas view by holding the middle mouse 
button (or mouse scroll) while moving your mouse around. You can 

MY also zoom in and out by scrolling your mouse while holding the Ctrl 
key on your keyboard. By default, scrolling your mouse will move the 
canvas view up and down. However, if your mouse cursor is on top of 
the horizontal scroll bar of the canvas, scrolling the mouse will move 
the view to the left and right. 


Next, delete both the mouseArea and Text items as we will be learning how to create 
a user interface from scratch using QML and Qt Quick. 


After you've done, let's set the Rectangle item's size to 800x600, as we're going to 
need a bigger space for the widgets. 
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17. 


18. 


19. 


20. 


21. 
22. 


23. 


24. 


25. 


26. 


Open Up main.qml and remove these lines of code: 


mouseArea.onClicked: ( 
Ot.quit (); 


) 


This is because the mouseArea ¡item no longer exists and it will cause an error 
when compiling. 

After that, remove the following code from MainForm.ui.qml: 

property alias mouseArea: mousearea 

This is removed for the same reason as the previous code, because the mouseArea 
item no longer exists. 


Then, copy the images we used in the previous C++ project over to the QML project's 
folder, because we are going re-create the same login screen, with QML! 


Add the images to the resource file so that we can use them for our Ul. 


Once you're done with that, open up Qt Quick Designer again and switch to the 
resource window. Click and drag the background image directly to the canvas. 
Then, switch over to the Layout tab on the properties pane and click the fill anchor 
button marked in red circle. This will make the background image always stick to 
the window size: 


Image | Layout | Advanced 


“w Layout 


Anchors 


Margin 


Target Parent 


Next, click and drag a Rectangle component from the library window to the 
canvas. We will use this as the top panel for our program. 


For the top panel, enable top anchor, left anchor, and right anchor so that it sticks to 
the top of the window and follow its width. Make sure all the margins are set to zero. 


Then, go to the Color property of the top panel and select Gradient mode. Set the 
first color to +805bcces and the second color to 480000000. This will create a half- 
transparent panel with a blue gradient. 


After that, add a text widget to the canvas and make it a child of the top panel. Set 
its text property to the current date and time (for example, Monday, 26-10-2015 3:14 
PM) for display purposes. Then, set the text color to white. 


[51] 
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27. Switch over to the Layout tab and enable top anchor and left anchor so that the text 
widget will always stick to the top left corner of the screen. 


28. Next, add a mouse area to the screen and set its size to 50x50. Then, make it a child 
of the top panel by dragging it on top of the top panel in the navigator window. 


29. Set the color of the mouse area to blue (++27a9e3) and set its radius to 2 to make its 
corners slightly rounded. Then, enable top anchor and right anchor to make it stick to 
the top right corner of the window. Set the top anchor's margin to 8 and right anchor's 
margin to 10 to give out some space. 


30. After that, open up the resources window and drag the shutdown icon to the canvas. 
Then, make it a child of the mouse area item we created a moment ago. Then, enable 
the fill anchor to make it fit the size of the mouse area. 


31. Phew, that's a lot of steps! Now your items should be arranged like this on the 
Navigator window: 


"it 


window 
background 
topPanel 
shutdownButton 
image! 
restartButton 
image2 


dateTime 


32. The parent-child relationship and the layout anchors are both very important to keep 
the widgets in the correct positions when the main window changes its size. 


33. At this point, your top panel should look something like this: 


Monday, 26-10-2015 3:14 PM 


34. Next, we will be working on the login form. First, add a new rectangle to the canvas 
by dragging it from the Library window. Resize the rectangle to 360x200 and set its 
radius to 15. 
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35. Then, set its color to 80000000, which will change it to black with 50% transparency. 


36. After that, enable the vertical center anchor and the horizontal center anchor to make 


37. 


38. 


39. 


it always align to the center of the window. Then, set the margin of the vertical center 
anchor to 100 so that it moves slightly lower to the bottom to give space to the logo. 
The following screenshot ¡llustrates the settings of the anchors: 


Anchors 


Target parent 
Margin 


Targe parent 


2 Mi 


Mar: in 


Add the text widgets to the canvas. Make them the children of the login 

form (rectangle widget) and set their text property to Username: and Password: 
respectively. Then, change their text color to white and position them accordingly. We 
don't need to set a margin this time because they will follow the rectangle's position. 


Next, add two text input widgets to the canvas and place them next to the text widgets 
we created just now. Make sure the text inputs are also the children of the login form. 
Since the text inputs don't contain any background color property, we need to add two 
rectangles to the canvas to use as their background. 


Add two rectangles to the canvas and make each of them a child of one of the text 
inputs we created just now. Then, set the radius property to 5 to give them some 
rounded corners. After that, enable fill anchors on both of the rectangles so that they 
will follow the size of the text input widgets. 
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40. 


41. 


42. 


43. 


44. 


45. 
46. 
47. 


After that, we're going to create the login button below the password field. First, add a 
mouse area to the canvas and make it a child of the login form. Then, resize it to your 
preferred dimension and move it into place. 

Since the mouse area also does not contain any background color property, we need 
to add a rectangle widget and make it a child of the mouse area. Set the color of the 
rectangle to blue (+27a9e3) and enable the fill anchor so that it fits nicely with the 
mouse area. 

Next, add a text widget to the canvas and make it a child of the login button. Change 


its text color to white and set its text property to Login. Finally, enable the horizontal 
center anchor and the vertical center anchor to align it to the center of the button. 


You will now get a login form that looks pretty similar to the one we made in the 
C++ project: 


Lagin 


After we have done the login form, it's time to add the logo. It's actually very simple. 
First, open up the resources window and drag the logo image to the canvas. 


Make ita child of the login form and set its size to 512x200. 

Position it above the login form and you're done! 

This is what the entire Ul look like when compiled. We have successfully re-created 
the login screen from the C++ project, but this time we did it with QML and Qt Quick! 


Monday, 26-10-2015 3:14 PM 


«gó MyOs 
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Qt Quick editor uses a very different approach for placing widgets in the application compared 
to the form editor. It's entirely up to the user which method is best suited for him/her. 


The following screenshot shows what the Qt Quick Designer looks like: 


* | Properties 


” 


None nul 
Welcome 


“Y Qt Quick - Basic 


Border Image  Flickable 


T 


Rectangle Text 


Hello World: 


We will now look at the various elements of the editor's Ul: 


1. Navigator: The Navigator window displays the items in the current QML file as a tree 
structure. It's similar to the object operator window in the other Qt Designer we used 
in previous section. 


2. Library: The Library window displays all the Qt Quick Components or Qt Quick 
Controls available in QML. You can click and drag it to the canvas window to add to 
your Ul. You can also create your own custom QML components and display it here. 


3. Resources: The Resources window displays all the resources in a list which can then 
be used in your Ul design. 


4. Imports: The Imports window allows you to import different QML modules into your 
current QML file, such as a bluetooth module, webkit module, positioning module, 
and so on, to add additional functionality to your QML project. 
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5. State pane: Stat pane displays the different states in the QML project which typically 
describe Ul configurations, such as the Ul controls, their properties and behavior, and 
the available actions. 


6. Properties pane: Similar to the property editor we used in previous section, this 
properties pane in QML Designer displays the properties of the selected item. You 
can also change the properties of the items in the code editor as well. 


7. Canvas: Canvas is the working area where you create QML components and 
design applications. 


Exposing QML object pointer to C++ 


Sometimes we want to modify the properties of a QML object through C++ scripting, such as 
changing the text of a label, hiding/showing the widget, changing its size, and so on. Qt's QML 
engine allows you to register your QML objects to C++ types which automatically exposes all 
its properties. 


How to do it... 


We want to create a label in QML and change its text occasionally. In order to expose the label 
object to C++, we can do the following steps. First, create a C++ class called MyLabel that 
extends from QObject class: 


mylabel.h: 
class MyLabel : public Q00bject 


( 


Q OBJECT 

public: 
// Object pointer 
Q0bject* myObject; 


explicit MyLabel (00bject *parent = 0); 


// Must call Q INVOKABLE so that this function can be used in QML 
Q INVOKABLE void SetMyObject (Q0bject* obj); 


) 


In the mylabel . cpp source file, define a function called SetMyO0bject () to save the object 
pointer. This function will later be called in QML: 


mylabel.cpp: 
void MyLabel : : SetMyObject (Q0bject* obj) 


( 


// Set the object pointer 
myObject = obj; 
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After that, in main. cpp, include MyLabel header and register it to QML engine using the 
function qmlRegisterType (): 


Hinclude "mylabel.h" 
int main(int argc, char *argvl 


( 


// Register your class to QML 
amlRegisterType<MyClass>("MyLabelLib", 1, 0, "MyLabel"); 


) 


Notice that there are four parameters you need to declare in qmlRegisterType (). 
Besides declaring your class name (MyLabe1), you also need to declare your library name 
(MyLabe11:1b) and its version (1. 0), which will be used for importing your class to QML 
later on. 


Now that the QML engine is fully aware of our custom label class, we can then map it to 
our label object in QML and import the class library we defined earlier by calling import 
MyLabelLib 1.0 in our QML file. Notice that the library name and its version number 
have to match with the one you declared in main. cpp, otherwise it will throw you an error. 


After declaring MyLabel in QML and setting its ID as myl1abels, call mylabel. 
SetMyObject (myLabel) to expose ¡ts pointer to C/C++ right after the label is 
being initialized: 


import MyLabelLib 1.0 


ApplicationWindow 
( 
id: mainWindow 
width: 480 
height: 640 


MyLabel 
( 
id: mylabel 


) 


Label 

( 
id: helloWorldLabel 
text: qsTr("Hello World!") 
Component .onCompleted: 
( 

mylabel . SetMyO0bject (hellowWorldLabel); 

) 

) 

) 
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Please be aware that you need to wait until the label ¡is fully initiated before exposing its 
pointer to C/C++, otherwise you may cause the program to crash. To make sure it's fully 
initiated, call SetMyO0bject () within Component . onCompleted and not any other places. 


Now that the QML label has been exposed to C/C++, we can change any of its properties by 
calling setProperty () function. For instance, we can set its visibility to true and change 
its text to Bye bye world!: 


// QVariant automatically detects your data type 
myObject->setProperty ("visible", OVariant (true)); 
myObject->setProperty("text", OVariant ("Bye bye world!")); 


Besides changing the properties, we can also call its functions by calling 
OMeta0Object : :invokeMethod (): 


QOVariant returnedValue; 
QVariant message = "Hello world!"; 


OMeta0bject : :invokeMethod (myObject, "myQMLFunction", 
Q RETURN_ARG (QVariant, returnedValue), 
Q ARG(QVariant, message)); 


gDebug() << "QML function returned: " << returnedValue.toString(); 


Or simply, we can call the invokedMethod () function with only two parameters if we do not 
expect any values to be returned from it: 


OMeta0bject : :invokeMethod (myObject, "myQMLFunction"); 


QML ¡is designed to be easily extensible through C++ code. The classes in the Qt QML module 
enable QML objects to be loaded and manipulated from C++, and the nature of the QML 
engine's integration with Qt's meta object system enables C++ functionality to be invoked 
directly from QML. To provide some C++ data or functionality to QML, it must be made 
available from a QObject-derived class. 


QML object types can be instantiated from C++ and inspected in order to access their 
properties, invoke their methods, and receive their signal notifications. This is possible due to 
the fact that all QML object types are implemented using QObject-derived classes, enabling 
the QML engine to dynamically load and introspect objects through the Qt meta object system. 
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In this chapter, we will cover the following recipes: 


» Property animation in Qt 


» Using easing curves to control property animation 


» Creating the animation group 


» Creating the nested animation group 


» State machine in Qt 


» States, transitions, and animations in QML 


» Animation widget properties using animators 


» Sprite animation 


Introduction 


Qt provides an easy way to animate widgets or any other objects that inherit the Q0bject 
class, through its powerful animation framework. The animation can be used either on its 
own or used together with the state machine framework, which allows different animations 


to be played based on the current active state of the widget. Qt's animation framework 


also supports grouped animation, which allows you to move more than one graphics item 


simultaneously, or move them in sequence one after the other. 


Property animation in Qt 


In this example, we will learn how to animate our Graphical User Interface (GUI) elements 
using Qt's property animation class, part of its powerful animation framework, which allows 
us to create fluid looking animation with minimal effort. 
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How to do it... 


1. First, let's create a new Qt Widgets Application project. After that, open up 
mainwindow.ui with Qt Designer and place a button on the main window, 
as shown here: 


- " " 
Type Here 
PushButton 
" " 
- - - 


2. Next, open Up mainwindow.cpp and add the following line of code at the beginning 
of the source code: 


Hinclude <Q0PropertyAnimation> 


3. Afterthat, open Up mainwindow.cpp and add the following code to the constructor: 
OPropertyAnimation *animation = new OPropertyAnimation 
(ui->pushButton, "geometry")'; 
animation->setDuration(10000); 
animation->setStartValue (ui->pushButton->geometry ()); 
animation->setEndValue (OQRect (200, 200, 100, 50)); 
animation->start (); 


One of the more common methods to animate a GUl element is through the property 
animation class provided by Qt, known as the OPropertyAnimat ion class. This class ¡is 
part of the animation framework and it makes use of the timer system in Qt to change the 
properties of a GUl element over a given duration. 


What we are trying to accomplish here is to animate the button from one position to another, 
while at the same time we also enlarge the button size along the way. 


By including the OPropertyAnimation header in our source code in Step 2, we will 
be able to access the OPropertyAnimation class provided by Qt and make use of its 
functionalities. 
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The code in Step 3 basically creates a new property animation and applies it to the push 
button we just created in Qt Designer. We specifically request the property animation 
class changes the geometry properties of the push button and sets its duration to 3,000 
milliseconds (3 seconds). 


Then, the start value of the animation ¡is set to the initial geometry of the push button, 
because obviously we want it to start from where we initially place the button in Qt Designer. 
The end value is then set to what we want it to become; in this case we will move the button 
to a new position at x: 200, y: 200 while changing its size to width: 100, height: 50 along 


the way. 


After that, call animation->start () to start the animation. 


Compile and run the project and now you should see the button start to move slowly across 
the main window while expanding in size a bit at a time, until it reaches its destination. You 
can change the animation duration and the target position and scale by altering the values 
in the preceding code. It's really that simple to animate a GUI element using Qt's property 
animation system! 


Qt provides us with several different sub-systems to create animations for our GUI, including 
timer, timeline, animation framework, state machine framework, and graphics view framework: 


1d 


Timer: Qt provides us with repetitive and single-shot timers. When the timeout value 
is reached, an event callback function will be triggered through Qt's signal-and-slot 
mechanism. You can make use of a timer to change the properties (color, position, 
scale, and so on) of your GUI element within a given interval, in order to create 

an animation. 


Timeline: Timeline calls a slot periodically to animate a GUl element. It is quite similar 
to a repetitive timer, but instead of doing the same thing all the time when the slot 

is triggered, timeline provides a value to the slot to indicate its current frame index, 
so that you can do different things (such as offset to a different space of the sprite 
sheet) based on the given value. 


Animation framework: The animation framework makes animating a GUI element 
easy by allowing its properties to be animated. The animations are controlled by using 
easing curves. Easing curves describe a function that controls what the speed of the 
animation should be, resulting in different acceleration and deceleration patterns. 
The types of easing curve supported by Qt include: linear, quadratic, cubic, quartic, 
sine, exponential, circular, and elastic. 


State machine framework: Qt provides us with classes for creating and executing 
state graphs, which allow each GUI! element to move from one state to another when 
triggered by signals. The state graph in the state machine framework is hierarchical, 
which means every state can also be nested inside of other states. 
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» Graphics view framework: The graphics view framework is a powerful graphics 
engine for visualizing and interacting with a large number of custom-made 2D 
graphical items. You can use the graphics view framework to draw your GUl and 
have them animated in a totally manual way if you are an experienced programmer. 


By making use of all the powerful features mentioned here, we're able to create an intuitive 
and modern GUI with ease. In this chapter, we will look into the practical approaches to 
animating GUI elements using Qt. 


Using easing curves to control property 


animation 


In this example, we will learn how to make our animation more interesting by utilizing easing 
curves. We will still use the previous source code, which uses the property animation to 
animate a push button. 


How to do it... 


1. Define an easing curve and add it to the property animation before calling the 

start () function: 
QPropertyAnimation *animation = 

new OPropertyAnimation(ui->pushButton, "geometry"); 
animation->setDuration(3000); 
animation->setStartValue (ui->pushButton->geometry ()); 
animation->setEndValue (QRect (200, 200, 100, 50)); 
QEasingCurve curve; 
curve.setType (QEasingCurve: :OutBounce) ; 
animation->setEasingCurve (curve); 
animation->start (); 


2. Call the setLoopCount () function to set how many loops you want it to repeat for: 

QPropertyAnimation *animation = 

new QPropertyAnimation(ui->pushButton, "geometry"); 
animation->setDuration(3000); 
animation->setStartValue (ui->pushButton->geometry ()); 
animation->setEndValue (QRect (200, 200, 100, 50)); 
QEasingCurve curve; 
Curve.setType (EasingCurve: :OutBounce) ; 
animation->setEasingCurve (curve); 
animation->setLoopCount (2); 
animation->start (); 
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3. Call setAmplitude (), setOvershoot (), and setPeriod () before applying the 
easing curve to the animation: 


QEasingCurve curve; 

curve.setType (QEasingCurve: :OutBounce) ; 
curve.setAmplitude (1.00); 
curve.setOvershoot (1.70); 
curve.setPeriod(0.30); 
animation->setEasingCurve (curve); 
animation->start (); 


In order to let an easing curve control the animation, all you need to do is to define an easing 
curve and add it to the property animation before calling the start () function. You can also 
try several other types of easing curve and see which one suits you best. Here is an example: 


animation->setEasingCurve (QOEasingCurve: :OutBounce) ; 


If you want the animation to loop after it has finished playing, you can call the 
setLoopCount () function to set how many loops you want it to repeat for, or 
set the value to - 1 for an infinite loop: 


animation->setLoopCount (-1); 


There are several parameters that you can set to refine the easing curve before applying it 
to the property animation. These parameters include amplitude, overshoot, and period: 


>  Amplitude: The higher the amplitude, the higher the bounce or elastic spring effect 
that will be applied to the animation. 


»  Overshoot: Some curve functions will produce an overshoot (exceeding its final value) 
curve due to damping effect. By adjusting the overshoot value, we are able to increase 
or decrease this effect. 


» Period: Setting a small period value will give a high frequency to the curve. A large 
period will give it a small frequency. 


These parameters, however, are not applicable to all curve types. Please refer to the Qt 
documentation to see which parameter is applicable to which curve type. 
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While the property animation works perfectly fine, sometimes it feels a little boring to look at a 
GUI element animated at a constant speed. We can make the animation look more interesting 
by adding an easing curve to control the motion. There are many types of easing curve that 
you can use in Qt, and here are some of them: 


OutQuad InO0utQuad 


OutinQuad InCubic OutCubic InOutCubic 


OutinCubic InQuart OutQuart InOutQuart 


As you can see from the preceding diagram, each easing curve produces a different ease-in 
and ease-out effect. 


For the full list of easing curves available in Qt, please refer to the Qt 


documentation athttp://doc.aqt.io/qt-5/qeasingcurve. 
á html+Type-enum. 


Creating an animation group 


In this example, we will learn how to use an animation group to manage the states of the 
animations contained in the group. 
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How to do it... 


1. We will use the previous example, but this time, we add two more push buttons to the 
main window, like so: 


- . . 
Type Here 
PushButton PushButton PushButton 
” " 
" . . 


2. Next, define the animation for each of the push buttons in the main window's 
constructor: 
OPropertyAnimation *animationl = 
new QPropertyAnimation(ui->pushButton, "geometry"); 
animationl->setDuration(3000); 
animationl->setStartValue (ui->pushButton->geometry ()); 
animationl->setEndValue (QRect (50, 200, 100, 50)); 


OPropertyAnimation *animation2 = 

new QPropertyAnimation (ui->pushButton_2, "geometry")'; 
animation2->setDuration(3000); 
animation2->setStartValue (ui->pushButton 2->geometry()); 
animation2->setEndValue (QRect (150, 200, 100, 50)); 


OPropertyAnimation *animation3 = 

new QPropertyAnimation(ui->pushButton_3, "geometry")'; 
animation3->setDuration(3000); 
animation3->setStartValue (ui->pushButton _3->geometry()); 
animation3->setEndValue (QRect (250, 200, 100, 50)); 
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3. After that, create an easing curve and apply the same curve to all three animations: 


QEFasingCurve curve; 

curve.setType (OEFasingCurve: :OutBounce) ; 
curve.setAmplitude(1.00); 

curve .setOvershoot (1.70); 
curve.setPeriod(0.30); 


animationl->setEasingCurve (curve); 
animation2->setEasingCurve (curve); 
animation3->setEasingCurve (curve); 


4. Once you have applied the easing curve to all three animations, we will then create 
an animation group and add all three animations to the group: 
OParallelAnimationGroup *group = new QParallelAnimationGroup; 
group->addAnimation (animationl); 
group->addAnimation (animation2); 
group->addAnimation (animation3); 


5. Call the start () function from the animation group we just created: 


group->start (); 


Since we are using an animation group now, we no longer call the start () function from the 
individual animation, but instead we will be calling the start () function from the animation 
group we just created. 


If you compile and run the example now, you will see all three buttons being played at the 
same time. This is because we are using the parallel animation group. You can replace it 
with a sequential animation group and run the example again: 


OSequentialAnimationGroup *group = new OSequentialAnimationGroup; 


This time, only a single button will play its animation at a time, while the other buttons will wait 
patiently for their turn to come. 


The priority is set based on which animation is added to the animation group first. You can 
change the animation sequence by simply rearranging the sequence of an animation being 
added to the group. For example, if we want button 3 to start the animation first, followed by 
button 2, and then button 1, the code will look like this: 


group->addAnimation (animation3); 
group->addAnimation (animation2); 
group->addAnimation (animationl); 
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Since property animations and animation groups are both inherited from the 
QAbstractAnimator class, it means that you can also add an animation group 
to another animation group to form a more complex, nested animation group. 


Qt allows us to create multiple animations and group them into an animation group. A group is 
usually responsible for managing the state of its animations (that is, it decides when to start, 
stop, resume, and pause them). Currently, Qt provides two types of class for animation groups, 
OParallelAnimationGroup and OSequentialAnimationGroup: 


» QParallelAnimationGroup: As its name implies, a parallel animation group runs 
all the animations in its group at the same time. The group is deemed finished when 
the longest-lasting animation has finished running. 


»  QSequentialAnimationGroup: A sequential animation group runs its animations 
in sequence, meaning it will only run a single animation at a time, and only play the 
next animation when the current one has finished. 


Creating a nested animation group 


One good example of using a nested animation group is when you have several parallel 
animation groups and you want to play the groups in a sequential order. 


How to do it... 


1. We will use the Ul from the previous example and add a few more buttons to the main 
window, like so: 


- - . 
Type Here 
PushButton PushButton PushButton 
" PushButton PushButton PushButton " 
- - - 
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2. 


First, create all the animations for the buttons, then create an easing curve and apply 
it to all the animations: 
OPropertyAnimation *animationl = 

new QPropertyAnimation(ui->pushButton, "geometry"); 
animationl->setDuration(3000); 
animationl->setStartValue (ui->pushButton->geometry ()); 
animationl->setEndValue (QRect (50, 50, 100, 50)); 


OPropertyAnimation *animation2 = 

new OPropertyAnimation(ui->pushButton_2, "geometry"); 
animation2->setDuration(3000); 
animation2->setStartValue (ui->pushButton 2->geometry()); 
animation2->setEndValue (ORect (150, 50, 100, 50)); 


OPropertyAnimation *animation3 = 

new OPropertyAnimation(ui->pushButton_3, "geometry"); 
animation3->setDuration(3000); 
animation3->setStartValue (ui->pushButton _3->geometry()); 
animation3->setEndValue (ORect (250, 50, 100, 50)); 


OPropertyAnimation *animation4 = 

new OPropertyAnimation (ui->pushButton_4, "geometry"); 
animation4->setDuration(3000); 
animation4->setStartValue (ui->pushButton 4->geometry()); 
animation4->setEndValue (ORect (50, 200, 100, 50)); 


OPropertyAnimation *animation5 = 

new OPropertyAnimation(ui->pushButton_5, "geometry"); 
animation5->setDuration(3000); 
animation5->setStartValue (ui->pushButton 5->geometry()); 
animation5->setEndValue (QRect (150, 200, 100, 50)); 


OPropertyAnimation *animation6 = 

new OPropertyAnimation(ui->pushButton_6, "geometry"); 
animation6->setDuration(3000); 
animation6->setStartValue (ui->pushButton 6->geometry()); 
animation6->setEndValue (QRect (250, 200, 100, 50)); 


QEasingCurve curve; 

curve.setType (OEFasingCurve: :OutBounce) ; 
curve.setAmplitude(1.00); 

curve .setOvershoot (1.70); 
curve.setPeriod(0.30); 
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animationl->setEasingCurve (curve); 
animation2->setEasingCurve (curve); 
animation3->setEasingCurve (curve); 
animation4->setEasingCurve (curve); 
animation5->setEasingCurve (curve); 
animation6->setEasingCurve (curve); 


3. Create two animation groups, one for the buttons in the upper column and another 
one for the lower column: 


OParallelAnimationGroup *group1 = new OParallelAnimationGroup; 
groupl->addAnimation(animationl); 
groupl->addAnimation(animation2); 
groupl->addAnimation(animation3); 


OParallelAnimationGroup *group2 = new QOParallelAnimationGroup; 
group2->addAnimation(animation4); 
group2->addAnimation(animation5); 


group2->addAnimation(animation6); 


4. We will create yet another animation group, which will be used to store the two 
animation groups we created previously: 
OSequentialAnimationGroup *groupAll = 
new OSeguentialAnimationGroup; 
groupAll->addAnimation(groupl); 
groupAll->addAnimation(group2); 
groupAll->start (); 


What we're trying to do here is to play the animation of the buttons in the upper column first, 
followed by the buttons in the lower column. 


Since both of the animation groups are parallel animation groups, the buttons belonging 
to the respective groups will be animated at the same time when the start () function 
is called. 


This time, however, the group is a sequential animation group, which means only a single 
parallel animation group will be played at a time, followed by the other when the first one 
is finished. 


Animation groups are a very handy system that allows us to create very complex GUI 
animations with simple coding. Qt will handle the difficult part for us so we don't have to. 
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State machines in Qt 


State machines can be used for many purposes, but in this chapter we will only cover topics 
related to animation. 


How to do it... 


1. First, we will set up a new user interface for our example program, which looks 


like this: 
" " M 
Change State Current state: State 1 
PushButton 
dl " 
" " la 


2. Next, we will include some headers in our source code: 


Hinclude <OStateMachine> 
Hinclude <QPropertyAnimation> 
Hinclude <QEventTransition> 


3. After that, in our main window's constructor, add the following code to create a new 
state machine and two states, which we will be using later: 


OStateMachine *machine = new QOStateMachine (this); 
QState *sl = new QState() 


O; 

QState *s2 = new QState(); 

4. Then, we will define what we should do within each state, which in this case will be 
to change the label's text, as well as the button's position and size: 


QState *sl = new QState(); 
sl->assignProperty(ui->statelabel, "text", "Current state: 1"); 


s1->assignProperty(ui->pushButton, "geometry", QRect(50, 200, 100, 
50)); 
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QOState *s2 = new OState(); 
s2->assignProperty(ui->statelabel, "text", "Current state: 2"); 


s2->assignProperty(ui->pushButton, "geometry", QRect(200, 50, 140, 
100)); 


Once you are done with that, let's proceed by adding event transition classes to our 

source code: 

QEventTransition *t1 = new QEventTransition(ui->changeState, 
QEvent : :MouseButtonPress); 

t1->setTargetState(s2); 

s1->addTransition(t1); 


QEventTransition *t2 = new QEventTransition(ui->changeState, 
QEvent : :MouseButtonPress); 


T2->setTargetState (sl); 
s2->addTransition(t2); 


Next, add all the states we have just created to the state machine and define state 1 as 
the initial state. Then, call machine->start () to start running the state machine: 


machine->addState (s1); 
machine->addState (s2); 


machine->setInitialState(s1); 
machine->start (); 


If you run the example program now, you will notice everything works fine, except 
the button is not going through a smooth transition and it simply jumps instantly to 
the position and size we set previously. This is because we have not used a property 
animation to create a smooth transition. 


Go back to the event transition step and add the following lines of code: 
QEventTransition *t1 = 
new QEventTransition(ui->changeState, OEvent: :MouseButtonPress); 
t1->setTargetState(s2); 
t1->addAnimation (new OPropertyAnimation (ui->pushButton, 
"geometry")); 
s1->addTransition(t1); 


QEventTransition *t2 = new QEventTransition(ui->changeState, 
QEvent : :MouseButtonPress); 

t2->setTargetState(s1); 

t2->addAnimation (new OPropertyAnimation (ui->pushButton, 
"geometry")); 

s2->addTransition(t2); 
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9. You can also add an easing curve to the animation to make it look more interesting; 
QPropertyAnimation *animation = 
new QPropertyAnimation (ui->pushButton, "geometry")'; 
animation->setEasingCurve (QEasingCurve: :OutBounce) ; 
QEventTransition *t1 = new QEventTransition(ui->changeState, 
QEvent : :MouseButtonPress); 
t1->setTargetState(s2); 
t1->addAnimation (animation); 
s1->addTransition(t1); 


QEventTransition *t2 = new QEventTransition(ui->changeState, 
QEvent : :MouseButtonPress); 

t2->setTargetState(s1); 

t2->addAnimation (animation); 

s2->addTransition(t2); 


There are two push buttons and a label on the main window layout. The button at the top-left 
corner will trigger the state change when pressed, while the label at the top-right corner will 
change its text to show which state we are currently in, and the button below will animate 
according to the current state. 


The OEventTransition classes define what will trigger the transition between one state 
and another. 


In our case, we want the state to change from state 1 to state 2 when the ui->changeState 
button (the one at the upper left) is clicked. After that, we also want to change from state 2 
back to state 1 when the same button is pressed again. This can be achieved by creating 
another event transition class and setting the target state back to state 1. Then, add these 
transitions to their respective states. 


Instead of just assigning the properties directly to the widgets, we tell Qt to use the property 
animation class to smoothly interpolate the properties toward the target values. It is that 
simple! 


There is no need to set the start value and end value, because we have already called the 
assignProperty () function, which has automatically assigned the end value. 


The state machine framework in Qt provides classes for creating and executing state graphs. 
Qt's event system ¡is used to drive the state machines, where transitions between states can 
be triggered by using signals, then the slots on the other end will be invoked by the signals 
to perform an action, such as playing an animation. 


[52] 
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Once you understand the basics of state machines, you can use them to do other things as 
well. The state graph in the state machine framework is hierarchical. Just like the animation 
group in the previous section, states can also be nested inside of other states: 


Initial State 


Transition 1 
7 (Animation 1) 
Transition 3 


(Animation 3) 


Transition 2 
(Animation 2) 


States, transitions, and animations in QML 


If you prefer to work with QML instead of C++, Qt also provides similar features in Qt Quick 
that allow you to easily animate a GUl element with the minimum lines of code. In this 
example, we will learn how to achieve this with QML. 


How to do it... 


1. First we will create a new Qt Quick Application project and set up our user interface 
like so: 


Hello World 
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2. Here is what my main. qml file looks like: 
import OtQuick 2.3 
import OtQuick.Window 2.2 


Window ( 
visible: true 
width: 480; 
height: 320; 


Rectangle ( 
id: background; 
anchors.fill: parent; 
color: "blue"; 


Text ( 
text: qsTr("Hello World"); 
anchors.centerln: parent; 
color: "white"; 
font.pointSize: 15; 


) 


3. Add the color animation to the Rectangle object: 


Rectangle ( 

id: background; 

anchors.fill: parent; 

color: "blue"; 

SequentialAnimation on color 

( 
ColorAnimation [ to: "yellow"; duration: 1000 
ColorAnimation [ to: "red"; duration: 1000 ) 
ColorAnimation [ to: "blue"; duration: 1000 ) 
loops: Animation.Infinite; 


) 


4. Then, add a number animation to the text object: 


Text ( 
text: qsTr("Hello World"); 
anchors.centerln: parent; 
color: "white"; 
font .pointSize: 15; 
SequentialAnimation on opacity ( 
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NumberAnimation [ to: 0.0; duration: 200) 
NumberAnimation [ to: 1.0; duration: 200) 
loops: Animation.Infinite; 


) 


Next, add another number animation to it: 


Text ( 

text: qsTr("Hello World"); 

anchors.centerln: parent; 

color: "white"; 

font .pointSize: 15; 

SequentialAnimation on opacity ( 
NumberAnimation [ to: 0.0; duration: 200) 
NumberAnimation [ to: 1.0; duration: 200) 
loops: Animation.Infinite; 

) 

NumberAnimation on rotation ([ 
from: 0; 
to: 360; 
duration: 2000; 
loops: Animation.Infinite; 


) 


Define two states, one called the PRESSED state and another called the RELEASED 
state. Then, set the default state to RELEASED: 


Rectangle ( 
id: background; 
anchors.fill: parent; 


state: "RELEASED"; 
states: [ 
State ( 
name: "PRESSED" 
PropertyChanges [ target: background; color: "blue") 
. 
State ( 
name: "RELEASED" 
PropertyChanges [ target: background; color: "red") 


) 
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7. Afterthat, create a mouse area within the Rectangle object so that we can click 
on it: 
MouseArea ( 
anchors.fill: parent; 
onPressed: background.state = "PRESSED"; 
onReleased: background.state = "RELEASED"; 


) 


8. Add some transitions to the Rectangle object: 


transitions: l 
Transition ( 
from: "PRESSED" 
to: "RELEASED" 
ColorAnimation [ target: background; duration: 200) 
» 
Transition ( 
from: "RELEASED" 
to: "PRESSED" 
ColorAnimation [ target: background; duration: 200) 
) 
] 


The main window consists of a blue rectangle and static text that says Hello World. 


We want the background color to change from blue to yellow, then to red, and back to blue in 
a loop. This can be easily achieved using the color animation type in QML. 


What we're doing at Step 3 is basically creating a sequential animation group within the 
Rectangle object, then creating three different color animations within the group, which 
will change the color of the object every 1,000 milliseconds (1 second). We also set the 
animations to loop infinitely. 


In Step 4, we want to use the number animation to animate the alpha value of the static 
text. We created another sequential animation group within the Text object and created 
two number animations to animate the alpha value from O to 1 and back. Then, we set the 
animations to loop infinitely. 


Then in Step 5, we rotate the Hello World text by adding another number animation to it. 


In Step 6, we wanted to make the Rectangle object change from one color to another when 
we click on it. When the mouse is released, the Rectangle object will change back to its 
initial color. To achieve that, first we need to define the two states, one called the PRESSED 
state and another called the RELEASED state. Then, we set the default state to RELEASED. 
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Now, when you compile and run the example, the background will instantly change color to 
blue when pressed and change back to red when the mouse is released. That works great and 
we can further enhance it by giving it a little transition when switching color. This can be easily 
achieved by adding transitions to the Rectangle object. 


In QML, there are eight different types of property animation you can use: 


» Anchor animation: Animates changes in anchor values 

» Color animation: Animates changes in color values 

» Number animation: Animates changes in qreal-type values 

» Parent animation: Animates changes in parent values 

» Path animation: Animates an item along a path 

» Property animation: Animates changes in property values 

» Rotation animation: Animates changes in rotation values 

»  Vector3d animation: Animates changes in QVector3d values 
Just like the C++ version, these animations can also be grouped together in an animation 
group to play the animations in sequence or in parallel. You can also control the animations 


using easing curves and determine when to play these animations using state machines, just 
like what we have done in the previous section. 


Animating widget properties using animators 


In this recipe, we will learn how to animate the properties of our GUI widgets using the 
animator feature provided by QML. 


How to do it... 


1. Create a rectangle object and add a scale animator to it: 


Rectangle ( 
id: myBox; 
width: 50; 
height: 50; 
anchors.horizontalCenter: parent.horizontalCenter; 
anchors.verticalCenter: parent.verticalCenter; 
color: "blue"; 


ScaleAnimator ( 
target: myBox; 
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from: 5; 

tos 
duration: 2000; 
running: true; 


) 


2. Add a rotation animator and set the running value in the parallel animation group, 
but not in any of the individual animators: 


ParallelAnimation ( 
ScaleAnimator ( 
target: myBox; 
from: 5; 
El 
duration: 2000; 
) 
RotationAnimator ( 
target: myBox; 
from: 0; 
to: 360; 
duration: 1000; 
) 
running: true; 


) 


3. Add an easing curve to the scale animator: 


ScaleAnimator ( 
target: myBox; 
from: 5; 
tos Tí 
duration: 2000; 
easing.type: Easing.In0utElastic; 
easing.amplitude: 2.0; 
asing.period: 1.5; 
running: true; 


The animator type can be used just like any other animation type. We want to scale a 
rectangle from a size of 5 to a size of 1 within 2,000 milliseconds (2 seconds). 
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We created a blue Rectangle object and added a scale animator to it. We set the initial 
value to 5 and the final value to 1. Then, we set the animation duration to 2000 and set 
the running value to true so that it will be played when the program starts. 


Just like the animation types, animators can also be put into groups (that is, parallel 
animation groups or sequential animation groups). An animation group will also be treated as 
an animator by QtQuick and be run on the scene graph's rendering thread whenever possible. 


In Step 2, we want to group two different animators into a parallel animation group so that 
they run together at the same time. 


We will keep the scale animator we have created previously and add another rotation 
animator to rotate the Rectangle object. This time, set the running value in the parallel 
animation group, but not in any of the individual animators. 


Just like the C++ version, QML also supports easing curves and they can be easily applied 
to any of the animations or animator types. 


There is something called animator in QML, which is similar but different from the ordinary 
animation type. Animator types are a special type of animation that operate directly on Qt 
Quick's scene graph, rather than the QML objects and their properties like regular animation 
types do. 


The value of the QML property will be updated after the animation has finished. However, the 
property is not updated while the animation is running. The benefits of using the animator 
type is that the performance is slightly better because it doesn't run on the Ul thread, but 
operates directly on the scene graph's rendering thread. 


Sprite animation 


In this example, we will learn how to create sprite animation in QML. 


How to do it... 


1. First of all, we'll need to add our sprite sheet to Qt's resource system so that it can be 
used in the program. Open up qml . qre and click the Add | Add Files buttons. Select 
your sprite sheet image and save the resource file by pressing Ctrl + S. 
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2. After that, create a new empty window in main.qml: 


import OtQuick 2.3 
import OtQuick.Window 2.2 


Window ( 
visible: true 
width: 420 
height: 380 
Rectangle ( 
anchors.fill: parent 
color: "white" 


) 


3. Once you're done with that, we will start creating an AnimatedSprite object 
in QML: 
import OtQuick 2.3 
import OtQuick.Window 2.2 


Window ( 
visible: true; 
width: 420; 
height: 380; 
Rectangle ( 
anchors.fill: parent; 
color: "white"; 


AnimatedSprite [ 
id: sprite; 
width: 128; 
height: 128; 
anchors.centerln: parent; 
source: "qrc:///horse 1.png"; 
frameCount: 11; 
frameWidth: 128; 
frameHeight: 128; 
frameRate: 25; 
loops: Animation.Infinite; 
running: true; 
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4. Add a mouse area to the window and check for the onC1icked event: 


MouseArea ( 
anchors.fill: parent; 
onClicked: ( 

if (sprite.paused) 
sprite.resume (); 

else 
sprite.pausel); 


) 
) 


5. Ifyou compile and run the example program now, you will see a little pony running in 
the middle of the window. How fun! 


ln 1] x 


E 


6. Next, we want to try and do something cool. We will make the horse run across the 
window and loop infinitely while playing its running animation! 


First, we need to remove the anchors.centerlIn: parent from QML and replace it 
with x and y values: 


AnimatedSprite ( 
id: sprite; 


width: 128; 
height: 128; 
Xx: -128; 


y: parent.height / 2; 

source: "qrc:///horse_1.png"; 
frameCount: 11; 

frameWidth: 128; 

frameHeight: 128; 
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frameRate: 25; 
loops: Animation.Infinite; 
running: true; 


) 


7. After that, add a number animation to the sprite object and set its properties like this: 


NumberAnimation ( 
target: sprite; 
property: "x"; 
from: -128; 
to: 512; 
duration: 3000; 
loops: Animation.Infinite; 
running: true; 


) 


8. Compile and run the example program now and you will see the pony go crazy and 
start running across the window! 


In this recipe, we placed the animated sprite object in the middle of the window and set its 
image source to the sprite sheet that we had just added to the project resource. 


Then, we counted how many frames there are in the sprite sheet that belong to the running 
animation, which in this case was 11 frames. We also told Qt about the dimension of each 
frame of the animation, which in this case was 128 x 128. After that, we set the frame rate 
to 25 to get a decent speed and then set it to loop infinitely. We then set the running value to 
true so that the animation will be played by default when the program starts running. 


Then in Step 4, we wanted to be able to pause the animation and resume it by clicking on the 
window. We simply check whether the sprite is current paused when clicking on the mouse 
area. If the sprite animation has been paused, then resume the animation; otherwise, pause 
the animation. 


In Step 6, we replaced anchors . centerlIn with x and y values so that the animated sprite 
object is not anchored to the center of the window, which would have made it impossible to 
move around. 


Then, we created a number animation within the animated sprite to animate its x property. We 
set the start value to somewhere outside the window on the left side, and set the end value 

to somewhere outside the window on the right side. After that, we set the duration to 3,000 
milliseconds (3 seconds) and made it loop infinitely. 


Lastly, we also set the running value to true so that it will play the animation by default when 
the program starts running. 
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Sprite animation is used extensively, especially in game development. Sprites are used for 
character animation, particle animation, and even GUI animation. A sprite sheet consists of 
many images combined into one, which can then be chopped down and displayed on the 
screen one at a time. The transitions between different images (or sprites) from the sprite 
sheet creates the illusion of animation, which we usually refer to as sprite animation. Sprite 
animation can be easily achieved in QML using the AnimatedSprite type. 


: In this example program, I'm using a free and open source image created by 
bluecarrot16 under the CC-BY 3.0 / GPL 3.0 / GPL 2.0 / OGA-BY 3.0 license. 
Es The image can be obtained legally at http: / /opengameart .org/ 
content /1lpc-horse. 
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In this chapter, we will cover the following recipes: 


» Drawing basic shapes on screen 

»  Exporting shapes to an SVG file 

»  Coordinate transformation 

» Displaying images on screen 

>»  Applying image effects to graphics 
» Creating a basic paint program 

»  2DCanvas in QML 


Introduction 


In this chapter, we will learn how to render 2D graphics on screen with Qt. Internally, Qt uses 
a low-level class called OPainter to render its widgets on the main window. Qt allows us to 
access and use the OPainter class for drawing vector graphics, text, 2D images, and even 
3D graphics. You can make use of the QOPainter class to create your own custom widgets 
or to create programs that rely heavily on computer graphics rendering such as video games, 
photo editors, 3D modeling tools, and so on. 
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Drawing basic shapes on screen 


In this section, we will learn how to draw simple vector shapes (line, rectangle, circle, and so 
on) and display text on the main window using the OPainter class. We will also learn how 
to change the drawing style of the vector shapes using the QPen class. 


How to do it... 


First, let's create a new Qt Widgets Application project: 


1. Open Up mainwindow.ui and remove the menu bar, main tool bar, and status bar 
so that we get a clean, empty main window. Right-click on the bar widgets and select 
Remove Menu Bar from the pop-up menu: 


Object Class 
4 MainWindow QMainWindow 
centralWidget [| QWidget 
mainToolBar OToolBar Promote to ... 
statusBar OStatusBar - 
| Remove Menu Bar | 


2. Then, open Up mainwindow.h and add the following code to include the OPainter 
header file: 


Hinclude <OMainWindow> 
finclude <QPainter> 


3. Then, declare the paintEvent () event handler below the class destructor: 
public: 
explicit MainWindow(QWidget *parent = 0); 
-MainWindow () ; 
virtual void paintEvent (QPaintEvent *event); 


4. Next, open Up mainwindow.cpp and define the paintEvent () event handler: 


void MainWindow: :paintEvent (QPaintEvent *event) 


( 
) 


5. After that, we will add text to the screen using the OPainter class inside the 
paintEvent () event handler. We set the text font settings before drawing it 
on the screen at the position (20, 30): 


OPainter textPainter (this); 
textPainter.setFont (QFont ("Times", 14, OFont: :Bold)); 
textPainter.drawText (QPoint (20, 30), "Testing"); 
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6. Then, we will draw a straight line that starts from (50, 60) and ends at (100, 
100): 


OPainter linePainter (this); 
linePainter.drawLine (OPoint (50, 60), OPoint(100, 100)); 


7. Wecan also easily draw a rectangle shape by calling the drawrRect () function using 
a QOPainter class. This time however, we also apply a background pattern to the 
shape before drawing it: 


OPainter rectPainter (this); 
rectPainter.setBrush(0t: :BDiagPattern) ; 
rectPainter.drawRect (QORect (40, 120, 80, 30)); 


8. Next, declare a QPen class, set its color to red, and set its drawing style to 
Ot: :DashDotLine. Then, apply the OPen class to OPainter and draw an ellipse 
shape at (80, 200) with a horizontal radius of 50 and a vertical radius of 20: 


QPen ellipsePen; 
ellipsePen.setColor(0t::red); 
ellipsePen.setStyle(0t: :DashDotLine); 


QPainter ellipsePainter (this); 
ellipsePainter.setPen(ellipsePen); 
ellipsePainter.drawEllipse (QPoint (80, 200), 50, 20); 


9. We can also use QPainterPath class to define a shape before passing it over to the 
OPainter class for rendering; 


OPainterPath rectPath; 
rectPath.addRect (ORect (150, 20, 100, 50)); 


QPainter pathPainter (this); 

pathPainter.setPen(QOPen (Qt: :red, 1, Qt: :DashDotLine, Ot: :FlatCap, 
Ot: :MiterJoin)); 

pathPainter.setBrush(0t::yellow) ; 


pathPainter .drawPath(rectPath); 


10. You can also draw any other shapes by using OPainterPath, such as an ellipse: 


OPainterPath ellipsePath; 
ellipsePath.addEllipse (QPoint (200, 120), 50, 20); 


QPainter ellipsePathPainter (this); 
ellipsePathPainter.setPen(QPen (QColor(79, 106, 25), 5, 
Qt: :SolidLine, Qt: :FlatCap, Ot: :MiterJoin)); 
ellipsePathPainter.setBrush(QColor (122, 163, 39)); 
ellipsePathPainter.drawPath(ellipsePath); 
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11. OPainter can also be used to draw an image file onto the screen. In the following 
example, we load an image file called tux.png and draw it on the screen at position 
(100, 150): 
QImage image; 
image.load("tux.png"); 


QPainter imagePainter (this); 
imagePainter.drawImage (OPoint (100, 150), image); 


12. The final result should look something like this: 


If you want to draw something on screen using OPainter, basically all you need to do is tell it 
what type of graphics it should be drawing (text, vector shape, image, polygon, and so on) with 
its position and size. 


QPen determines what the outline of the graphic should look like, such as its color, line width, 
line style (solid, dashed, dotted, and so on), cap style, join style, and so on. 
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On the other hand, QOBrush sets the style of the background of the graphics, such as the 
background color, pattern (solid color, gradient, dense brush, crossing diagonal lines, and 
so on) and pixmap. 


The options for the graphics should be set before calling the draw function (drawLine (), 
drawRect (), drawEllipse (), and so on). 


If your graphics do not appear on screen and you see warnings such as 
OPainter::setPen: Painter not active and OPainter: :setBrush: Painter 
not active appearing on the application output window in Qt Creator, it means that the 
OPainter class is not currently active and your program will not trigger its paint event. To 
solve this problem, set the main window as the parent of the OPainter class. Usually, if 
you're writing code in the mainwindow. cpp file, all you need to do is to put this in the 
bracket when initializing OPainter. For example: 


OPainter linePainter (this); 


QImage can load images from both the computer directories and from the program resources. 


Think of OPainter as a robot with a pen and an empty canvas. You just have to tell the robot 
what type of shape it should be drawing and its location on the canvas, then the robot will do 
its job based on your description. To make your life easier, the OPainter class also provides 
numerous functions such as drawArc (), drawEllipse (), drawLine (), drawRect (), 
drawPie (), and so on that allow you to easily render a predefined shape. 


In Qt, all the widget classes (including the main window) have an event handler called 
QWidget : :paintEvent (). This event handler will be triggered whenever the operating 
system thinks that the main window should re-draw its widgets. Many things can lead to that 
decision, such as the main window being scaled, a widget changing its state (that is, a button 
being pressed), or functions such as repaint () or update () being invoked manually in the 
code. Different operating system may behave differently when it comes to deciding whether 
or not to trigger the update event on the same set of conditions. If you're making a program 
that requires continuous and consistent graphical updates, call repaint () or update () 
manually with a timer. 


Exporting shapes to SVG files 


Scalable Vector Graphics (SVG) is an XMLbased language for describing two-dimensional 
vector graphics. Qt provides classes for saving vector shapes into an SVG file. This feature can 
be used to create a simple vector graphics editor similar to Adobe Illustrator and Inkscape. 


In the next example, we will continue using the same project file from the previous example. 
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How to do it... 


Let's learn how to create a simple program that displays SVG graphics on screen: 


1. First of all, let's create a menu bar by right-clicking the main window widget on the 
hierarchy window and selecting Create Menu Bar option from the pop-up menu. After 
that, add a File option to the menu bar and a Save as SVG action underneath it: 


Object 


EN MainWindow 


File | Type Here 
SaveasSVG  *Y 


Add Separator 


Class 


Create Menu Bar 


Add Tool Bar 
Create Status Bar 


Change objectName... 


Change toolTip... 
Change whatsThis... 


2. 


2. After that, you will see an item called actionSave_as_SVG in the Action Editor 
window at the bottom of the Qt Creator window. Right-click on the item and choose 
Go to slot... from the pop-up menu. A window will now appear, which carries a 
list of slots available for the particular action. Choose the default signal called 
triggered () and click the OK button: 


Name 


Shortcut 


actionSave_as_SVG 


Save as SVG 


l. 


Select signal 


changed() 
hoveredO) 


Action Editor | Signals 8: Slots Editor | 


QAction 


toggledíbool) QAction 


triggeredíbool) 
destrovedO 


QAction 
QOhiect 
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Once you have clicked the OK button, Qt Creator will switch over to the script 
editor. You will realize that a slot called on _actionSave_as SVG triggered() 
has been automatically added to your main window class. At the bottom of your 
mainwindow.h, you will see something like this: 


void MainWindow::on actionSave_as SVG triggerea() 


( 
) 


The preceding function will be called when you clicked on the Save as SVG option 
from the menu bar. We will write our code within this function to save all the vector 
graphics into an SVG file. 


To do that, we need to first of all include a class header called OSvgGenerator at 
the top of our source file. This header is very important as it's required for generating 
SVG files. Then, we also need to include another class header called OFileDialog, 
which will be used to open the save dialog: 


Hinclude <QtSvg/QSvgGenerator> 
Hinclude <QFileDialog> 


We also need to add the SVG module to our project file, like so: 


QT += core gui svg 


Then, create a new function called paintAl11 () within mainwindow.h, like so: 


public: 
explicit MainWindow(QWidget *parent = 0); 
-MainWindow () ; 


virtual void paintEvent (OPaintEvent *event); 
void paintAll (QOSvgGenerator *generator = 0); 


After that, in mainwindow. cpp, move all the code from paintEvent () to the 
paintAl1l () function. Then, replace all the individual OPainter objects with a 
single, unified OPainter for drawing all the graphics. Also, call the begin () function 
before drawing anything and call the end () function after finishing drawing. The code 
should look like this: 


void MainWindow: :paintAll (QSvgGenerator *generator) 


( 


QPainter painter; 


if (engine) 

painter .begin (engine); 
else 

painter .begin(this); 
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painter.setFont (QFont ("Times", 14, OFont::Bold)); 
painter.drawText (QPoint (20, 30), "Testing"); 


painter.drawLine (QPoint (50, 60), QPoint(100, 100)); 


painter.setBrush(0t: :BDiagPattern); 
painter.drawRect (QRect (40, 120, 80, 30)); 


QPen ellipsePen; 
ellipsePen.setColor(0t::red); 
ellipsePen.setStyle(0t: :DashDotLine); 


painter.setPen(ellipsebPen); 
painter.drawEllipse(QPoint(80, 200), 50, 20); 


OPainterPath rectPath; 
rectPath.addRect (QRect (150, 20, 100, 50)); 


painter.setPen(QOPen(0t::red, 1, Ot: :DashDotLine, Qt: :FlatCap, 
Ot: :MiterJoin)); 

painter.setBrush(0t::yellow); 

painter.drawPath (rectPath) ; 


QPainterPath ellipsePath; 
ellipsePath.addEllipse (QPoint (200, 120), 50, 20); 


painter.setPen(QPen(QOColor(79, 106, 25), 5, Ot: :SolidLine, 
Qt: :FlatCap, Ot: :MiterJoin)); 

painter.setBrush (QColor(122, 163, 39)); 

painter.drawPath (ellipsePath); 


QImage image; 
image.load("tux.png"); 


painter .drawImage (QPoint (100, 150), image); 


painter.end(); 


) 


8. Since we have moved all the code from paintEvent () to paintAll (), we shall 
now call the paintAl11 () function inside paintEvent (), like so: 


void MainWindow: :paintEvent (OPaintEvent *event) 


( 


paintAll (); 


www.it-ebooks.info 


Chapter 3 


9. 


10. 


Then, we will write the code for exporting the graphics to an SVG file. The code will 

be written inside the slot function called on_actionSave_as SVG triggered(), 
which was generated by Qt. We start by calling the save file dialog and obtain the 
directory path with the desired file name from the user: 


void MainWindow::on actionSave_as SVG triggerea() 


( 


OString filePath = OFileDialog: :getSaveFileName (this, "Save 
SsvG", "", "SVG files (*.svg)"); 


if (filePath == "") 
return; 


) 


After that, create a OSvgGenerator object and save the graphics to an SVG file by 
passingthe OSvgGenerator object to the paintAl1 () function: 


void MainWindow::on actionSave_as SVG triggered() 


( 


OString filePath = OFileDialog: :getSaveFileName (this, "Save 
SVG", "", "SVG files (*.svg)"); 


if (filePath == "") 


return; 


QSvgGenerator generator; 
generator.setFileName (filePath); 
generator.setSize(QSize(this->width(), this->height())); 
generator.setViewBox(QRect(0, 0, this->width(), 

this->height ())); 
generator.setTitle("SVG Example"); 
generator.setDescription("This SVG file is generated by Qt."); 


paintAll (generator); 
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11. Compile and run the program now and you should be able to export the graphics by 
going to File | Save as SVG: 


SVG File 


(Opened with browser) 


SVG Example 


file///C:/Projects/QPainter_2D_ 


E A 


zz, 


4 Our program 


By default, OPainter will use the paint engine from its parent object to draw the graphics 
assigned to it. If you don't assign any parent to QPainter, you can manually assign a paint 
engine to it, which is what we have done in this example. 


The reason why we placed the code into paintA11 () is because we want to reuse the same 
code for two different purposes: for displaying the graphics on the window and exporting 

the graphics to an SVG file. Notice the default value of the generator variable in the 
paintAll () function is set to 0, which means no OSvgGenerator object is required to run 
the function unless specified. Later on, in the paintA11 () function, we check whether the 
generator object exists. If it does exist, use it as the paint engine for the painter, like so: 


if (engine) 
painter.begin (engine); 

else 
painter.begin(this); 


www.it-ebooks.info 


Chapter 3 


Otherwise, pass the main window to the begin () function (since we're writing the code in 
mainwindow.cpp, we can directly use this to refer to main window's pointer) so that it will 
use the paint engine of the main window itself, which means the graphics will be drawn onto 
the surface of the main window. 


In this example, it's required to use a single OPainter object to save the graphics into the 
SVG file. If you use multiple OPainter objects, the resulting SVG file will contain multiple 
XML header definitions and thus the file will be deemed to be invalid by any graphics editor 
software out there. 


QFileDialog::getSaveFileName () will open up the native save file dialog for the user 
to choose the save directory and set a desired file name. Once the user is done with that, 
the full path will be returned as a string and we will be able to pass that information to the 
OSvgGenerator object to export the graphics. 


Notice that in the previous screenshot, the penguin in the SVG file has been cropped. This is 
because the canvas size of the SVG was set to follow the size of the main window. To help the 
poor penguin getting its body back, scale the window bigger before exporting the SVG file. 


Scalable Vector Graphics (SVG) defines the graphics in XML format. Since it is vector 
graphics, SVG graphics do not lose any quality if they are zoomed or resized. 


SVG allows three types of graphic object: vector graphics, raster graphics, and text. Graphical 
objects, including PNG and JPEG raster images, can be grouped, styled, transformed, and 
composited into previously rendered objects. 


You can check out the full specification of SVG graphics at https: / /www.w3 .org/TR/SVG. 


Coordinate transformation 


In this example, we will learn how to use coordinate transformation and a timer to create a 
real-time clock display. 


How to do it... 


To create our first graphical clock display, let's follow these steps: 


1. First, create a new Qt Widgets Application project. Then, open up mainwindow.ui 
and remove the menu bar, tool bar, and status bar. 
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2. After that, open Up mainwindow.h and include the following headers: 
Hinclude <QTime> 


Hinclude <QOTimer> 
Hinclude <OPainter> 


3. Then, declare the paintEvent () function, like so: 
public: 
explicit MainWindow(QWidget *parent = 0); 
-MainWindow () ; 


virtual void paintEvent (QPaintEvent *event); 


4. Inmainwindow.cpp, create three arrays to store the shapes of the hour hand, 
minute hand, and second hand, where each of the arrays contains three sets of 
coordinates: 


void MainWindow: :paintEvent (QPaintEvent *event) 


( 


static const QPoint hourHand[3] = 


( 
QPoint (4, 4), 
QPoint (-4, 4), 
QPoint(0, -40) 


Y; 


static const QPoint minuteHand[3] 


Í 


QPoint (4, 4), 
QPoint (-4, 4), 
QPoint (0, -70) 


Y; 


static const QPoint secondHand[3] 


( 


QPoint (2, 2), 
QPoint(-2, 2), 
QPoint(0, -90) 
Y; 
) 


5. After that, add the following code below the arrays to create the painter and move it 
to the center of the main window. Also, we adjust the size of the painter so that it fits 
nicely in the main window, even when the window is being resized: 


int side = qMin(width(), height ()); 
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QOPainter painter (this); 
painter.setRenderHint (QOPainter: :Antialiasing); 
painter.translate(width() / 2, height () / 2); 
painter.scale(side / 250.0, side / 250.0); 


Once you are done with that, we will start drawing the dials by using a for loop. Each 
dial is rotated by an increment of 6 degrees, so 60 dials would complete a full circle. 
Also, the dial at every 5 minutes will look slightly longer: 


for (int i = 0; 1 < 60; ++1) 
( 
if ((1 % 5) != 0) 


painter.drawLine(92, 0, 96, 0); 
else 


painter.drawLine(86, 0, 96, 0); 
painter.rotate(6.0); 


) 


Then, we proceed with drawing the hands of the clock. Each hand's rotation is 
calculated according to the current time and its respective unit over 360 degrees: 


QTime time = QTime::currentTime (); 


// Draw hour hand 

painter.save(); 

painter.rotate ((time.hour() * 360) / 12); 
painter.setPen(0t : :NoPen) ; 
painter.setBrush(0t::black); 
painter.drawConvexPolygon (hourHand, 3); 
painter.restore(); 


// Draw minute hand 

painter.save(); 

painter.rotate ((time.minute() * 360) / 60); 
painter.setPen(0t: :NoPen) ; 
painter.setBrush(0t::black); 
painter.drawConvexPolygon (minuteHand, 3); 
painter.restore(); 


// Draw second hand 

painter.save(); 
painter.rotate ( (time.second() * 360) / 60); 
painter.setPen(0t: :NoPen) ; 
painter.setBrush(0t::black); 
painter.drawConvexPolygon (secondHand, 3); 
painter.restorel(); 
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8. Last but not least, create a timer to refresh the graphics every second so that the 
program will work like a real clock! 
MainWindow: :MainWindow(QOWidget *parent) 
QMainWindow (parent), ui (new Uli: :MainWindow) 


( 


ui->setupui (this); 


OTimer* timer = new OTimer(this); 
timer->start (1000); 
connect (timer, SIGNAL (timeout ()), this, SLOT (update ())); 


) 


9. Compile and run the program now and you should see something like this: 


- 
- 
- 


Each of the arrays contain three OPoint data, which form the shape of an elongated triangle. 
The arrays are then passed to the painter and rendered as a convex polygon using the 
drawConvexPolygon () function 


Before drawing each of the clock hands, we use painter .save () to save the state of the 
OPainter object and then proceed with drawing the hand using coordinate transformation. 
Once we're done with the drawing, we restore the painter to its previous state by calling 
painter.restore (). This function will undo all the transformations before painter. 
restore () so that the next clock hand will not inherit the transformations of the previous 
one. Without using painter.save() and painter .restore (), we will have to manually 
change back the position, rotation, and scale before drawing the next hand. 
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A good example of not using painter.save () and painter.restore () is when drawing 
the dials. Since each dial's rotation is an increment of 6 degrees from the previous one, we 
don't need to save the painter's state at all. We just have to call painter.rotate(6.0) ina 
loop and each dial will inherit the previous dial's rotation. We also use a modulus operator (*%) 
to check whether the unit represented by the dial can be divided by 5. If it can, then we draw it 


slightly longer. 

Without using a timer to constantly call the update () slot, the clock will not function properly. 
This is because paintEvent () will not be called by Qt when there is no change to the state 
of the parent widget, which in this case is the main window. Therefore, we need to manually 
tell Qt that we need to refresh the graphics by calling update () every second. 


We used the painter .setRenderHint (OPainter: :Antialiasing) function to enable 
anti-aliasing when rendering the clock. Without anti-aliasing, the graphics will look very jagged 


and pixelated: 


With anti-aliasing Without anti-aliasing 
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The OPainter class uses the coordinate system to determine the position and size of 

the graphics before rendering them on screen. This information can be altered to make 

the graphics appear at a different position, rotation, and size. This process of altering the 
coordinate information of a graphic is what we called coordinate transformation. There are 
several types of transformation, among them are translation, rotation, scaling and shearing; 


E 


Translate Rotate 
Scale Shear 
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Qt uses a coordinate system that has its origin at the top-left corner, meaning the x values 
increase to the right and the y values increase downwards. This coordinate system might be 
different from the coordinate system used by the physical device, such as a computer screen. 
Qt handles this automatically by using the OPaintDevice class, which maps Qt's logical 
coordinates to the physical coordinates. 


QOPainter provides four transform operations to perform different types of transformation: 


» QPainter::translate (): Offset the graphic's position by a given set of units 


» QPainter::rotate (): Rotate the graphics around the origin in a clockwise 
direction 


» QPainter::scale(): Offset the graphic's size by a given factor 
» QPainter::shear (): Twist the graphic's coordinate system around the origin 


Displaying images on screen 


Qt not only allows us to draw shapes and images on screen, but it also allows us to overlay 

multiple images on top of each other and combine the pixel information from all the layers 

using different types of algorithms to create very interesting results. In this example, we will 
learn how to overlay images on top of each other and apply different composition effects 

to them. 


How to do it... 


Let's create a simple demo that shows the effect of different image compositions by following 
these steps: 


1. First, set up a new Qt Widgets Application project and remove the menu bar, tool 
bar, and status bar. 
2. Next, add the QPainter class header to mainwindow. h: 


Hinclude <OPainter> 


3. After that, declare the paintEvent () virtual function like so: 


virtual void paintEvent (QPaintEvent* event); 


4. Inmainwindow.cpp, we will first load several image files using the QImage class: 


void MainWindow: :paintEvent (QPaintEvent* event) 


( 
QImage image; 
image.load("checker.png"); 
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Qlmage image2; 
image2.load ("tux.png"); 


QImage image3; 
image3.load("butterfly.png"); 


) 


Then, create a OPainter object and use it to draw two pairs of images, where one 
image is on top of another: 


QOPainter painter (this); 


painter.drawImage (QPoint (10, 10), image); 
painter.drawImage (Q0Point (10, 10), image2); 
300, 10), image); 


painter.drawImage (QPoint (300, 40), image3); 


painter .drawImage (QPoint 


( 
( 
( 
( 


Compile and run the program now and you should see something like this: 


Next, we will set the composition mode before drawing each image on screen: 


OPainter painter (this); 


painter.setCompositionMode (QPainter: :CompositionMode Difference); 
painter.drawImage (QPoint (10, 10), image); 
painter.setCompositionMode (QPainter: :CompositionMode Multiply); 
painter.drawImage (QPoint (10, 10), image2); 


painter.setCompositionMode (QPainter: :CompositionMode Xor); 
painter.drawImage (QPoint (300, 10), image); 
painter.setCompositionMode (QPainter: :CompositionMode SoftLight); 
painter.drawImage (Q0Point (300, 40), image3); 
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8. Compile and run the program again and you will now see something like this: 


When drawing images with Qt, the sequence of calling the drawImage () function will 
determine which image is being rendered first and which one is rendered later. This will 
affect the depth order of the images and yield different outcomes. 


In the previous example, we called drawImage () four times to draw four different images 

on screen. The first drawImage () renders checker . png and the second drawImage () 
renders tux. png (the penguin). The image that gets rendered later will always appear in front 
of the others, which is why the penguin is showing in front of the checker box. The same goes 
for the butterfly and the checker on the right. The reason why you can still see the checker 
even though the butterfly is rendered in front of it is because the butterfly image is not fully 
opaque. 


Now let's invert the render sequence and see what happens. We will try to render the penguin 
first, followed by the checker box. The same goes for the other pair of images on the right: the 
butterfly gets rendered first, followed by the checker box: 
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To apply a composition effect to the image, we'll have to set the painter's composition 
mode before drawing the image, by calling the painter. setCompositionMode () 
function. You can pick a desired composition mode from the auto-complete menu by 
typing OPainter : : CompositionMode. 


In the previous example, we applied OPainter: : CompositionMode Difference 
to the checker box on the left, which inverted its color. Next, we applied 
OPainter::CompositionMode Overlay to the penguin which makes it 

blend with the checker and we're able to see both images overlaying each other. 


On the right-hand side, we applied OPainter : : CompositionMode_Xor to the checker, 
where if differences exist between the source and destination, colors are shown; otherwise, 
it will be rendered black. Since it's comparing differences with the white background, 

the non-transparent part of the checker becomes completely black. We also applied 
OPainter: :CompositionMode SoftLight to the butterfly image. This blends the 
pixels with the background with reduced contrast. 


If you want to disable the composition mode you have just set for the previous 
rendering before proceeding to the next, simply set it back to the default mode, 
which is OPainter: : CompositionMode SourceOver. 


There's more... 


For example, we can overlay multiple images on top of each other and use Qt's image 
composition feature to merge them together and calculate the resulting pixels on screen, 
based on the composition mode we used. This is often used in image editing software 
such as Photoshop and GIMP to composite image layers. 
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There are more than 30 types of composition mode available in Qt. Some of the most 
commonly used modes are: 


1d 


Clear: The pixels in the destination are set to fully transparent, independent of 
the source. 

Source: The output is the source pixel. This mode is the inverse of 
CompositionMode Destination. 


Destination: The output is the destination pixel. This means that the blending has no 
effect. This mode is the inverse of CompositionMode Source. 


Source Over: Often referred to as alpha blending. The alpha of the source is used to 
blend the pixel on top of the destination. This is the default mode used by OPainter. 


Destination Over: The alpha of the destination is used to blend it on top of the source 
pixels. This mode is the inverse of CompositionMode _SourceOver. 


Source In: The output is the source, where the alpha is reduced by that of the 
destination. 


Destination In: The output is the destination, where the alpha is reduced by that of 
the source. This mode is the inverse of CompositionMode Sourceln. 


Source Out: The output is the source, where the alpha is reduced by the inverse of 
the destination. 


Destination Out: The output is the destination, where the alpha is reduced by the 
inverse of the source. This mode is the inverse of CompositionMode _Source0Qut. 


Source Atop: The source pixel is blended on top of the destination, with the alpha of 
the source pixel reduced by the alpha of the destination pixel. 


Destination Atop: The destination pixel is blended on top of the source, with the 
alpha of the source pixel reduced by the alpha of the destination pixel. This mode is 
the inverse of CompositionMode _SourceAtop. 

Xor: This is short for Exclusive OR, which is an advanced blending mode that is 
primarily used for image analysis. The source, whose alpha is reduced by the inverse 
of the destination alpha, is merged with the destination, whose alpha is reduced by 
the inverse of the source alpha. 


The following image shows the outcome of overlaying two images with different 
composition modes: 


MDéihbé 


SourceOver | [DestinationOver| Sourceln DestinationIn 


Source 


Source Out ¡DestinationQut SourceAtop | [DestinationAtop Clear Xor 
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Applying image effects to graphics 


Qt provides an easy way to add image effects to any graphics drawn using the QPainter 
class. In this example, we will learn how to apply different images effects, such as drop 
shadow, blur, colorize, and opacity effects, to a graphic before displaying it on screen. 


How to do it... 


Let's learn how to apply image effects to text and graphics by following these steps: 


1. Create a new Qt Widgets Application and remove the menu bar, tool bar, 
and status bar. 


2. Create a new resource file by going to File | New File or Project and adding all the 
images required by the project: 


Choose a template: All Templates 57 


Projects _) Qt Designer Form Class 
Application _) Qt Designer Form 
Library [ D Ot Resource File 
Other Project _) QML File (Qt Quick 1) 
Non-0t Project J QML File (Qt Quick 2) 
Import Project _) QtQuick Ul File 

Files and Classes ) JSFile 
C++ 
Ot 
GLSL 


Creates a Qt Resource file (.qrc). 


Supported Platforms: Desktop 


General 
Java 


Python 
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3. 


4. 


Next, open Up mainwindow.ui and add four labels to the window. Two of the labels 
will be text and the two others we will load with the images we have just added to the 
resource file: 


Drop Shadow 


Blur Effect 


You may already notice the font sizes are way bigger than the default size. That can 
be achieved by adding a style sheet to the label widget, for example: 


font: 26pt "MS Shell Dlg 2"; 


After that, open Up mainwindow.-cpp and include the following headers at the top of 
the source code: 


Hinclude <QGraphicsBlurEffect> 
Hinclude <0GraphicsDropShadowEffect> 
Hinclude <QGraphicsColorizeEffect> 
Hinclude <QGraphicsOpacityEffect> 


Then, within the constructor of the MainWindow class, add the following code to 
create a drop shadow effect, and apply it to one of the labels: 


MainWindow: :MainWindow(QWidget *parent) 
OMainWindow (parent), ui(new Uli: :MainWindow) 


( 


ui->setupui (this); 


QGraphicsDropShadowEffect* shadow = new 
QGraphicsDropShadowEffect (); 


shadow->setXOffset (4); 
shadow->setYOffset (4); 
ui->label->setGraphicsEffect (shadow) ; 
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7. Next, we will create a colorized effect and apply it to one of the images, in this case 
the butterfly. We also set the effect color to red: 
QGraphicsColorizeEffect* colorize = new QGraphicsColorizeEffect (); 
colorize->setColor (QOColor(255, 0, 0)); 
ui->butterfly->setGraphicsEffect (colorize); 


8. Once we're done with that, create a blur effect and set its radius to 12. Then, apply 
the graphics effect to the other label: 
OGraphicsBlurEffect* blur = new QOGraphicsBlurEffect (); 
blur->setBlurRadius (12); 
ui->label2->setGraphicsEffect (blur) ; 


9.  Lastly, create an alpha effect and apply it to the penguin image. We set the opacity 
value to 0.2, which means 20% opacity: 
QOGraphicsOpacityEffect* alpha = new QGraphicsOpacityEffect (); 
alpha->setOpacity(0.2); 
ui->penguin->setGraphicsEffect (alpha) ; 


10. Compile and run the program now and you should be able to see something like this: 


Each of the graphic effects is a class of its own that inherits the OGraphicsEffect 
parent class. You can create your own custom effect by creating a new class that inherits 
OQGraphicsEffect and re-implementing some of the functions in it. 


Each effect has its own set of variables that are specifically created for it. For example, you 
can set the color of the colorized effect, but there is no such variable in the blur effect. This is 
because each effect is vastly different from the others, which is also why it needs to be a class 
of its own rather than using the same class for all the different effects. 
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It's only possible to add a single graphics effect to a widget at a time. If you add more than 
one effect, only the last one will be applied to the widget as it replaces the previous one. Other 
than that, be aware that if you create a graphics effect, say the drop shadow effect, you can't 
assign it to two different widgets as it will only get assigned to the last widget you applied it to. 
If you need to apply the same type of effect to several different widgets, create a few graphics 
effects of the same type and apply each of them to their respective widgets. 


Currently Qt supports blur, drop shadow, colorize, and opacity effects. These 

effects can be used by calling the following classes: OGraphicsBlurEffect, 
OQGraphicsDropShadowEffect, OGraphicsColorizeEffect, and 
OQGraphicsOpacityEffect. All these classes are inherited from the OGraphicsEffect 
class. You can also create your own custom image effect by creating a subclass of 
OGrapicsEffect (or any other existing effects) and re-implementing the draw () function. 


The graphics effect changes only the bounding rectangle of the source. If you want to increase 
the margin of the bounding rectangle, re-implement the virtual boundingRectFor () 
function, and call updateBoundingRect () to notify the framework whenever this 

rectangle changes. 


Creating a basic paint program 


Since we have learned so much about the OPainter class and how to use it to display 
graphics on screen, | guess it's time for us to do something fun so that we can put our 
knowledge into practice. 


In this recipe, we will learn how to make a basic paint program that allows us to draw lines on 
a canvas with different brush sizes and colors. We will also learn how to use the QImage class 
and the mouse events in order to construct the paint program. 


How to do it... 


Let us start our fun project through the following steps: 


1. Again, we start by creating a new Qt Widgets Application project and removing the 
tool bar and status bar. We will keep the menu bar this time. 
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2. After that, set up the menu bar like so: 


File | Brush Size Brush Color Type Here 
Save a 
Clear + Brush Size | Brush Color Type Here 
2px a! 
pabias [| File Brush Size | Brush Color | Type Here 
AX o 5 | 
ARES 10px El ' 
' White + 
Type Here 
Red 
Add Separator Ñ 3 
Green + 
Blue La] 
Type Here 
Add Separator 


3. We will leave the menu bar as it is for the moment and let's proceed to 
mainwindow. h. First, include the following header files as it's required 
for the project: 


Hinclude <QPainter> 
Hinclude <QMouseEvent > 
Hinclude <QFileDialog> 


4. Next, declare the variables that we'll be using for this project, like so: 


private: 
Ui::MainWindow *tui; 


QImage image; 
bool drawing; 
QPoint lastPoint; 
int brushSize; 
QColor brushColor; 


5. Then, declare the event callback functions, which are inherited from the OWidget 
class. These functions will be triggered by Qt when the respective event happens. We 
will override these functions and tell Qt what to do when these events get called: 


public: 
explicit MainWindow(QWidget *parent = 0); 
-MainWindow () ; 


virtual void mousePressEvent (QMouseEvent *event); 
virtual void mouseMoveEvent (QMouseEvent *event); 
virtual void mouseReleaseEvent (QMouseEvent *event); 
virtual void paintEvent (QPaintEvent *event); 
virtual void resizeEvent (QResizeEvent *event); 
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6. After that, go to mainwindow.cpp and add the following code to the class 
constructor for setting up some of the variables: 


MainWindow: :MainWindow(QOWidget *parent) 
QOMainWindow (parent), ui(new Uli: :MainWindow) 


ui->setupui (this); 


image = QImage(this->size(), Qlmage::Format_RGB32); 
image.fill(Qt:: white); 


drawing = false; 
brushColor = Qt: :black; 
brushSize = 2; 


) 


7. Next, we will construct the mousePressEvent () event and tell Qt what to do when 
the left mouse button is pressed: 


void MainWindow::mousePressEvent (OMouseEvent *event) 


( 


1f (event->button() == Ot: :LeftButton) 
drawing = true; 
lastPoint = event->pos(); 


) 


8. Then, we will construct the mouseMoveEvent () event and tell Qt what to do when 
the mouse is moving. In this case, we want to draw the lines on the canvas if the left 
mouse button is being held: 


void MainWindow: :mouseMoveEvent (OMouseEvent *event) 


( 


if ((event->buttons() € Qt: :LeftButton) £6 drawing) 
( 
QPainter painter (Simage) ; 
painter.setPen(QOPen (brushColor, brushSize, Ot: :SolidLine, 
Qt: :RoundCap, Ot: :RoundJoin)); 
painter.drawLine (lastPoint, event->pos()); 


lastPoint = event->pos(); 
this->updatel(); 
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10. 


11. 


After that, we will also construct the mouseReleaseEvent () event, which will be 
triggered when the mouse button is released: 


void MainWindow: :mouseReleaseEvent (QOMouseEvent *event) 


( 


if (event->button() == Ot: :LeftButton) 


( 


drawing = false; 


) 


Once you're done with that, we will proceed to the paintEvent () event, which 
is surprisingly simple compared to the other examples we have seen in previous 
sections: 


void MainWindow: :paintEvent (OPaintEvent *event) 
OPainter canvasPainter (this); 
canvasPainter .drawImage (this->rect (), image, image.rect ()); 


) 


Remember we have a menu bar sitting around doing nothing? Let's right-click 

on each of the actions below the GUI editor and select Go to slot... in the pop-up 
menu. We want to tell Qt what to do when each of these options on the menu bar 
is selected: 


[] New... 
a G Edit... 
ll y é Go to slot... 
Name Used Used In Ñ 
actionSave  |Y áe cut 
actionClear (Y BD 
action2px Y copy 
action5px Y (5) Paste 
actionl0px  |Y Select all 
actionBlack  |Y X| Delete 
actionWhite  |Y, 
actionRed Y Bl Icon View 
actionGreen (Y Detailed View 
actionBlue vYl: r 
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12. Then, select the default slot called triggered () and press the OK button. Qt 
will automatically generate a new slot function in both your mainwindow.h and 
mainwindow.cpp. Once you are done with all the actions, you should see something 
like this in your mainwindow.h: 


private slots: 
void on actionSave triggeread/(); 
void on actionClear triggered(); 
void on _action2px triggered(); 
void on action5px triggered(); 
void on actionl0px triggered(); 
void on actionBlack triggered(); 
void on actionWhite triggered/(); 
void on actionRed triggered(); 
void on actionGreen triggered/(); 
void on actionBlue triggered(); 


13. Next, we will tell Qt what to do when each of these slots is triggered: 


void MainWindow::on actionSave triggered() 


( 
OString filePath = OFileDialog: :getSaveFileName (this, 
"Save Image", "", "PNG (*.png);;¡JPEG (*.jpg *.jpeg);;Al11l files 


AA 


if (filePath == "") 


return; 


image.save(filePath); 


) 


void MainWindow: :on actionClear triggered () 


( 
image.fi11(0t::white); 
this->updatel(); 


) 


void MainWindow::on action2px triggered() 


( 


brushSize = 2; 


) 


void MainWindow::on action5px triggered() 


( 


brushSize = 5; 


) 


void MainWindow::on actionl0px triggered() 


( 


brushSize = 10; 
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) 


void MainWindow: :on _ actionBlack _triggered() 


( 


brushColor = Qt: :black; 


void MainWindow: :on actionWhite triggered() 


( 


brushColor = Qt: :white; 


) 


void MainWindow: :on _actionRed triggered() 


( 


brushColor = Qt: :red; 


) 


void MainWindow: :on actionGreen triggered() 


( 


brushColor = Qt: :green; 


) 


void MainWindow: :on_actionBlue triggered () 


( 


brushColor = Qt: :blue; 


) 


If we compile and run the program now, we will get a simple but usable 
paint program: 


File Brush Size Brush Color 


A 


Chapter 3 
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In this example, we created a QImage widget when the program started. This widget acts as 
the canvas and it will follow the size of the window whenever the window gets resized. 


In order to draw something on the canvas, we will need to use the mouse events provided 
by Qt. These events will tell us the position of the cursor and we will be able to use this 
information to change the pixels on the canvas. 


We use a Boolean variable called drawing to let the program know whether it should start 
drawing when a mouse button is pressed. In this case, when the left mouse button is pressed, 
the variable drawing will be set to true. We also save the current cursor position to the 
lastPoint variable when the left mouse button is pressed, so that Qt will know where it 
should start drawing. 


When the mouse moves, the mouseMoveEvent () event will be triggered by Qt. This is where 
we need to check whether the drawing variable is set to true. If it is, then OPainter can 
start drawing the lines onto the QImage widget based on the brush settings that we provide. 


The brush settings consist of the brush color as well as the brush size. These settings 
are being saved as variables and can be altered by selecting a different setting from the 
menu bar. 


Please remember to call the update () function when the user is drawing on the canvas. 
Otherwise, the canvas will remain empty even though we have changed the pixel information 
of the canvas. We also have to call the update () function when we select File | Clear from 
the menu bar to reset our canvas. 


In this example, we use QImage : : save () to save the image file, which is very easy and 
straightforward. We use the file dialog to let the user decide where to save the image and its 
desired file name. Then, we pass the information to OImage and it will do the rest by itself. If 
we don't specify the file format to the QImage: : save () function, QImage will try to figure it 
out by looking at the extension of the desired file name. 


2D canvas in QML 


In all the previous examples of this chapter, we have discussed the methods and techniques 
used to render 2D graphics with Qt's C++ API. However, we have yet to learn how to achieve 
similar results using the powerful QML script. 
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How to do it... 


In this project, we'll be do something quite different: 


1. As usual, the first step we should do is to create a new project by going to File | New 
File or Project and selecting Qt Quick Application as the project template. 


2. Once you are done creating the new project, open up qm1 .qre from the Resource 
folder in the project pane by right-clicking on it and selecting Open in Editor. Then, 
remove MainForm.ui.qml from your project's resources, as we don't need it for 
this project: 


v f 
ari main.qml 
ari MainForm.ui.qmi 


3. Next, open Up main. qml, which is listed under qm1 . rc in the project pane. After 
that, remove the entire section that references MainForm. Now what is left is only 
the Window object in main. qml. After that, set an ID for the wndow and adjust its 
width and height to higher values, like so: 


import OtQuick 2.5 
import OtQuick.Window 2.2 


Window 

( 
id: myWindow 
visible: true 
width: 540 
height: 380 


) 


4. Then, add a Canvas object under myWindow and call it myCanvas. After that, we 
make its width and height the same as myWindow: 


Window 

( 
id: myWindow 
visible: true 
width: 540 
height: 380 
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Canvas 
id: myCanvas 
width: myWindow.width 
height: myWindow.height 


J 
) 


5. Next, we define what will happen when the onPaint event is triggered; in this case, 
we will draw a cross on the window: 


Canvas 

( 
id: myCanvas 
width: myWindow.width 
height: myWindow.height 


onPaint: 
var context = getContext ('2d') 
context.fillStyle = 'white' 


context.fillRect(0, 0, width, height) 
context.lineWidth = 2 
context.strokeStyle = 'black' 


// Draw cross 

context .beginPath() 
context.moveTo(50, 50) 
context.lineTo(100, 100) 
context.closePath() 
context.stroke () 


context .beginPath() 
context.moveTo(100, 50) 
context.lineTo(50, 100) 
context.closePath() 
context.stroke () 


) 


6. After that, we add the following code to draw a tick besides the cross: 


// Draw tick 

context .beginPath () 
context .moveTo(150, 90) 
context .lineTo(158, 100) 
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con 


con 
con 
con 
con 
con 


text .closePath() 
text .stroke () 


text .beginPath() 
text .moveTo(180, 100) 
text.lineTo(210, 50) 
text .closePath() 


text.stroke () 


Then, draw a triangle shape by adding the following code: 


// 

con 
con 
con 


con 
con 
con 
con 
con 
con 
con 


Afte 
// 


con 
con 
con 


var 


con 
con 
con 
con 
con 


con 
con 
con 
con 
con 


Draw triangle 


text .linewidth = 4 
text.strokeStyle = "red" 
text.fillStyle = "salmon" 


text .beginPath() 
text .moveTo(50,150) 
text.lineTo(150,150) 
text.lineTo(50,250) 
text .closePath() 
text.fi11() 

text .stroke () 


Draw circle 


text .linewidth = 4 
text.strokeStyle = "blue" 
text.fillStyle = "steelblue" 


pi = 3.141592653589793 


text .beginPath() 

text.arc(220, 200, 60, 0, pi, true) 
text .closePath() 

text.fi11() 

text .stroke () 


text .beginPath() 

text.arc(220, 280, 60, 0, 2 * pi, true) 
text .closePath() 

text.fi11() 

text .stroke () 


r that, draw a half circle and a full circle with the following code: 


Chapter 3 
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9. 


10. 


11. 


Finally, we draw a 2D image from a file: 


// Draw image 
context .drawImage ("tux.png", 280, 10, 256, 297) 


However, the preceding code alone will not successfully render an image on screen 
because you must also load the image file beforehand. Add the following code 
within the Canvas object to ask QML to load the image file when the program is 
started, then call the requestPaint () signal when the image is loaded so that 
the onPaint () event slot will be triggered: 


Component .onCompleted: 


( 
J 


loadImage ("tux.png") 


onImageLoaded:requestPaint (); 
onPaint: 


( 
) 


Build and run the program now and you should get the following result: 


// The code we added previously 


E] QML_2D_Canvas =- Xx 


XV 
yA 
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In this chapter, we will cover the following recipes: 


» Setting up OpenGL in Qt 

» Hello World! 

»  Rendering 2D shapes 

»  Rendering 3D shapes 

»  Texturing in OpenGL 

>» Lighting and texture filter in OpenGL 

» Moving an object using keyboard controls 
»  3DCanvas in QML 


Introduction 


In this chapter, we will learn how to use Open Graphics Library (OpenGL), a powerful 
rendering Application Program Interface (API), and combine it with Qt. OpenGL is a cross- 
language, cross platform API for drawing 2D and 3D graphics on screen through the Graphics 
Processing Unit (GPU) within our computer's graphics chip. In this chapter, we will be learning 
OpenGL 2.x instead of 3.x, because the fixed-function pipeline is easier for beginners to grasp 
compared to the newer programmable pipeline. Qt supports both versions, so there should 

be no problem switching over to OpenGL 3.x and above once you have learned the basic 
concepts of OpenGL rendering. 
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Setting up OpenGL in Qt 


In this recipe, we will learn how to set up OpenGL in Qt. 


How to do it... 


First, let's create a new Qt widgets application by going to File | New File or Project. 


Next, we will remove the mainwindow.ui file because we are not going to use it in 
this example. Right-click on the mainwindow.ui file and select Remove File from 
the drop-down menu. Then, a message box will appear and ask for your confirmation. 
Tick Delete file permanently and press the OK button. 


3. After that, open up your project file (. pro) and add the OpenGL module to your 
project by adding an opengl1 keyword behind QT +=, like so: 


QT += core gui opengl 


4. You also need to add another line in your project file so that it will load both the 
OpenGL and GLu (OpenGL Utilities) libraries during startup. Without these two 
libraries, you program will not be able to run: 


LIBS += -lopengl132 -1g1u32 


5. Then, open Up mainwindow.h and remove several things from it: 


Hifndef MATNWINDOW_H 
Hdefine MATNWINDOW_H 
Hinclude <OMainWindow> 


namespace Ui ( 
class MainWindow; 


) 


class MainWindow : public OMainWindow 
( 
Q OBJECT 
public: 
explicit MainWindow(QWidget *parent = 0); 
-MainWindow () ; 
private: 
Ui::MainWindow *+tui; 
l; 


Hendif // MAINWINDOW_H 


6. Next, add the following code to your mainwindow. h: 


Hifndef MAINWINDOW_H 
Hdefine MAINWINDOW_H 
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Hinclude <Q00penGLWindow> 


class MainWindow : public QO0penGLWindow 
( 
Q OBJECT 
public: 
explicit MainWindow(QWidget *parent = 0); 
-MainWindow () ; 


protected: 
virtual void initializeGL(); 
virtual void resizeGL (int w, int h); 
virtual void paintGL(); 
void paintEvent (QPaintEvent *event); 
void resizeEvent (OResizeEvent *event); 


y; 
Hendif // MAINWINDOW_H 


Once you have done that, we will proceed to the source file, which ¡is mainwindow. 
cpp. Functions that we have just added to the header, such as initializeGL(), 
resizeGL(),and so on, can be left empty for now; we will only use these in the 
next section: 


Hinclude "mainwindow.h" 


Hinclude "ui_mainwindow.h" 


MainWindow: :MainWindow(QWidget *parent): 
OMainWindow (parent), 
ui (new Ui: :MainWindow) 

MainWindow: :MainWindow(QWidget *parent) 

( 
ui->setupui (this); 
setSurfaceType (QWindow: : OpenGL Surface) ; 


MainWindow: : -MainWindow () 


( 


delete ul; 


) 


void MainWindow::initializeGL() 


( 


void MainWindow::resizeGL(int w, int h) 
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void MainWindow: :paintGL() 


void MainWindow: :paintEvent (QPaintEvent *event) 


void MainWindow::resizeEvent (OResizeEvent *event) 


( 
) 


8.  Lastly, set a title for the main window and resize it to 640x480 by adding the 
following code to your main. cpp file: 


Htinclude "mainwindow.h" 
Hinclude <QApplication> 


int main(int argc, char *argvl]) 

( 
QApplication alargc, argv); 
MainWindow w; 
w.setTitle("OpenGL Hello World!"); 
w.resize(640, 480); 
w.show(); 
return a.exec(); 


) 


9. If you compile and run the project now, you will see an empty window with a black 
background. Don't worry about it, your program is now running on OpenGL! 
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The OpenGL module must be added to the project file ( . pro) in order to access header files 
that are related to OpenGL, such as QtOpenGL, QOpenGLFunctions, and so on. We used the 
QO0penGLWindow class instead of QMainWindow for the main window because it's designed 
to easily create windows that perform OpenGL rendering, and it offers better performance 
compared to QOpenGLWidget due to the fact that it has no dependencies in its widget 
module. We must call setSurfaceType (QWindow: : OpenGL Surface) to tell Qt we prefer 
to use OpenGL to render the ¡images to screen, instead of QPainter. The QOpenGLWindow 
class provides several virtual functions (initializeGL(),resizeGL(),paintGL(),and 
so on) for us to conveniently set up OpenGL and perform graphics rendering. 


OpenGL is a cross-language, cross-platform API for drawing 2D and 3D graphics on screen 
through the Graphics Processing Unit (GPU) within our computer's graphics chip. 


Computer graphics technology has been evolving rapidly over the years, so rapidly that the 
software industry can hardly keep up with its pace. In 2008, Khronos Group, the company 
that maintains and develops OpenGL, announced the release of the OpenGL 3.0 specification, 
which created a huge uproar and controversy throughout the industry. That was mainly 
because OpenGL 3.0 was supposed to deprecate the entire fixed-function pipeline from the 
OpenGL API, and it was simply an impossible task for the big players to make the sudden 
switch overnight from a fixed-function pipeline to a programmable pipeline. This resulted in 
two different major versions of OpenGL being maintained concurrently by the Khronos Group, 
namely OpenGL 2.x and 3.x. 


In this chapter, we will be learning OpenGL 2.x instead of 3.x, because the fixed-function 
pipeline is easier for beginners to grasp than the programmable pipeline. It's very 
straightforward and less confusing for learning the basics of computer graphics programming. 
Qt supports both versions, so there should be no problem switching over to OpenGL 3.x (and 
above) once you have learned the basic concepts of OpenGL rendering. 


Qt uses OpenGL internally whenever ¡it sees fit. Moreover, the new Qt Quick 2 renderer ¡is 
based on OpenGL and is now a core part of Qt's graphical offering. That makes OpenGL 
more compatible with Qt than any other graphics APIs, such as DirectX. 


Hello world! 


In this recipe, we will learn about the pipeline of OpenGL and how to render a simple shape to 
the window. We will continue from the example project used in the previous recipe. 
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How to do it... 


1. 


First of all, go to mainwindow.h and add the following headers at the top of the 
source code: 

Hinclude <QOSurfaceFormat> 

Hinclude <Q00penGLFunctions> 

Hinclude <O0tOpenGL> 

Hinclude <GL/glu.h> 


Next, declare two private variables in mainwindow. h: 


private: 
QOpenGLContext* context; 


QO0penGLFunctions* openGLFunctions; 


After that, move over to mainwindow.cpp and set the surface format to 
compatibility profile. We also set the OpenGL version to 2.1 and create the OpenGL 
context using the format we just declared. Then, use the context we just created to 
access the OpenGL functions that are relevant only to the OpenGL version we have 
just set, by calling context ->functions (): 


MainWindow: :MainWindow(QWidget *parent) 

( 
setSurfaceType (QWindow: :OpenGLSurface) ; 
QSurfaceFormat format; 
format.setProfile(QSurfaceFormat::CompatibilityProfile); 
format .setVersion(2, 1); // OpenGL 2.1 
setFormat (format) ; 


context = new QOpenGLContext; 
context ->setFormat (format) ; 
context->create(); 

context ->makeCurrent (this); 


openGLFunctions = context->functions (); 


) 


Next, we will start adding some code to the paintGL () function: 


void MainWindow: :paintGL() 


( 


// Initialize clear color (cornflower blue) 
glClearColor(0.39f, 0.58f, 0.93f£, 1.f); 


// Clear color buffer 
glClear(GL COLOR BUFFER BIT); 
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// Render quad 

glBegin(GL QUADS); 
glVertex2f(-0.5f, -0.5£); 
glVertex2f(0.5f, -0.5f£); 
glVertex2f(0.5f, 0.5f£); 
glVertex2f(-0.5f, 0.5f£); 

glEnd (); 


glFlush(); 


) 


5. Nothing will appear on the screen yet until we call paintGL () in the paintEvent () 
function: 


void MainWindow: :paintEvent (OPaintEvent *event) 


( 


paintGL(); 


) 


6.  Ifyou compile and run the project now, you should be able to see a white rectangle 
being drawn in front of a blue background: 


[a] 
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We must set the OpenGL version to 2.1 and the surface format to compatibility profile so 
that we can access the fixed-function pipeline, which no longer exists in the newer version. 
Alternatively, you can set the surface format to OSurfaceFormat : : CoreProfile if you 
want to use OpenGL 3.x and above. 


We called yl1C1earColor () and glClear(GL COLOR BUFFER BIT) to remove the 
previous render buffer (or in layman's terms, the previous frame) and fill the entire canvas 
with the color we provided. We will repeat this step after an image has been rendered so that it 
clears the entire screen before we proceed to the next frame. We called glBegin (GL_ QUAD) 
to tell OpenGL we are about to draw a quad on the screen. After that, we provided the positions 
of all the vertices (or points) to OpenGL so that it will know how the quad should be positioned 
on the screen by calling glVertex2f () four times, because a quad can only be constructed 
by connecting four different points. Then, we called g1Ena () to inform OpenGL that we are 
done with the quad. 


Always call ylFlush () once you are done drawing images on screen so that OpenGL clears 
away all the unwanted information from the memory to give space to the next drawing. 


Lastly, we must call paintGL () in the paintEvent () function, or else nothing will be 
drawn on the screen. Just like what we have learned in the previous chapters, all drawings 
happen within the paintEvent () function, and it will only be called by Qt when it thinks it's 
necessary to refresh the screen. To force Qt to update the screen, call update () manually. 


Rendering 2D shapes 


Since we have already learned how to draw our first rectangle on the screen, we will further 
enhance it in this section. We will take the previous example and continue from there. 


How to do it... 


1. First, go to the paintGL () function in mainwindow.cpp and replace the quad 
in the previous example with new code. This time, we draw a quad together with 
a triangle: 


void MainWindow: :paintGL() 


( 


// Initialize clear color (cornflower blue) 
glClearColor(0.39f, 0.58f, 0.93f, 1.f); 


// Clear color buffer 
glClear(GL COLOR BUFFER BIT); 
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glBegin(GL QUADS); 
glVertex2f(-0.5f, -0.5£); 
glVertex2f(0.5f, -0.5£); 
glVertex2f(0.5f, 0.5f£); 
glVertex2f(-0.5f, 0.5£); 
glEnd (); 


glBegin(GL QUADS) 
glColor3f(1.f, 


0.f, 0.f£); glVertex2f£(-0.8f, -0.8f); 
glColor3f(1.f, 1. 

1 

0 


, 0.£); glVertex2f£(0.3f, -0.8f); 
, 0.£); glVertex2f£(0.3f, 0.3f); 
, 1.£); glVertex2f(-0.8f, 0.3f); 


glColor3f(0.f, 
glColor3f(0.f, 
glEnd (); 


se 


glBegin(GL TRIANGLES) 
glColor3f(1.f, 0.f, 0.f); glVertex2f£(-0.4f, -0.4f); 
glColor3f(0.f, 1.f, 0.f); glVertex2f£(0.8f£, -0.1£f); 
glColor3f(0.f, 0.f, 1.f); glVertex2f£(-0.1f, 0.8£); 
glEnd () ; 


glFlush(); 


) 


2. Next, in the resizeGL() function, add the following code to adjust the viewport 
and orthographic view so that the rendered image correctly follows the window's 
aspect ratio: 


void MainWindow::resizeGL(int w, int h) 


( 


// Initialize Projection Matrix 
glMatrixMode (GL PROJECTION) ; 
glLoadIdentity(); 


glViewport(0, 0, w, h); 


qreal aspectRatio = qreal (w) / qreal(h); 
gl0rtho(-1 * aspectRatio, 1 * aspectRatio, -1, 1, 1, -1); 


) 


3. Then, inthe resizeEvent () function, call the resize () function and force the 
main window to refresh the screen: 


void MainWindow::resizeEvent (OResizeEvent *event) 


( 


resizeGL(this->width(), this->height ()); 
this->update (); 
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4. Afterthat, in the initializeGL () function, we call resizeGL () once so that the 
aspect ratio of the first rendered image is correct (before any window resize event 
is triggered): 
void MainWindow::initializeGL() 


( 


resizeGL(this->width(), this->height()); 


) 


5. Once you're done with that, compile and run the program. You should see something 
like this: 


The geometric primitive types supported by OpenGL are points, lines, linestrips, line loops, 
polygons, quads, quad strips, triangles, triangle strips, and triangle fans. In this example, 
we drew a quad and a triangle, where each of the shapes is provided with a set of vertices 
and colors so that OpenGL knows how the shapes should be rendered. The rainbow color 
is created by giving a different color to each of the vertices. OpenGL will automatically 
interpolate the colors between each vertex and display it onscreen. The shape that gets 
rendered later will always appear in front of other shapes. In this case, the triangle is being 
rendered later and hence it appears in front of the rectangle. 
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We need to calculate the aspect ratio of the main window every time it's resized, so that 
the rendered image will not be stretched and result in an odd appearance. Always reset 
the projection matrix by calling glMatrixMode () and glLoadIdentity () before calling 
glViewport () and glO0rtho () so that the shapes are being rendered correctly when 
resizing the main window. Without resetting the projection matrix, we will be using the 
matrices from the previous frame and hence producing the wrong projection. 


e á Remember to call update () when the window is being resized, otherwise 
3 the screen will not be updated. 


Render 3D shapes 


We have learned how to draw simple 2D shapes onscreen in the previous section. However, 
to fully utilize the OpenGL API, we also need to learn how to use it to render 3D images. In 
a nutshell, 3D images are simply an illusion created using 2D shapes stacked in a way that 
makes them look like 3D. 


The main ingredient here is the depth value, which determines which shapes should appear 
in front or at the back of the other shapes. The primitive shape that is positioned behind 
another surface (with a shallower depth than another shape) will not be rendered (or partially 
rendered). OpenGL provides a simple way to achieve this, without too much technical hassle. 


How to do it... 


1. First, add the QTimer header to your mainwindow. h: 


Hinclude <OTimer> 


2. Then, add a private variable to your MainWindow class: 


private: 
QOpenGLContext* context; 


Q0O0penGLFunctions* openGLFunctions; 
float rotation; 


3. We also add a public slot to mainwindow. h for later use: 


public slots: 
void updateAnimation(); 
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4. 


After that, enable depth testing by adding glEnable (GL_DEPTH_TEST) to the 
initializeGL() function in mainwindow.cpp: 


void MainWindow::initializeGL() 
( 
// Enable Z-buffer depth test 
glEnable (GL_DEPTH_TEST); 
resizeGL (this->width(), this->height ()); 


) 


Next, we will alter the resizeGL () function so that it uses the perspective view 
instead of the orthogonal view: 


void MainWindow::resizeGL(int w, int h) 
( 
// Set the viewport 
glViewport(0, 0, w, h); 
qreal aspectRatio = qreal (w) / qreal(h); 


// Initialize Projection Matrix 
glMatrixMode (GL PROJECTION) ; 
glLoadIdentity(); 


glOrtho(-1 * aspectRatio, 1 * aspectRatio, -1, 1, 1, -1); 
gluPerspective(75, aspectRatio, 0.1, 400000000); 


// Initialize Modelview Matrix 
glMatrixMode (GL MODELVIEW) ; 
glLoadIdentity(); 


) 


After that, we need to alter the paintGL () function as well. First, add 

GL DEPTH _BUFFER_BITtothe glClear () function, because we also need to clear 
the depth information for the previous frame before we proceed to render the next 
frame. Then, remove the code we used in the previous example, which rendered a 
quad and a triangle on the screen: 


void MainWindow: :paintGL() 

( 
// Initialize clear color (cornflower blue) 
glClearColor(0.39f, 0.58f, 0.93f, 1.f); 


// Clear color buffer 
glClear(GL COLOR BUFFER BIT); 
glClear(GL COLOR BUFFER BIT | GL DEPTH BUFFER BIT); 
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s); 
glColor3f(1.f, 0.f, 0.f); glVertex2f(-0.8f, 
glColor3f(1.f, 1.f, 0.f£); glVertex2f(0.3f, 
glColor3f(0.f, 1.f, 0.f); glVertex2f(0.3f, 
glColor3f(0.f, 0.f, 1.f£); glVertex2f(-0.8f, 


glEnd (); 


glBegin(GL TRIANGLES)'; 
glColor3f(1.f, 0.f, 0.f); 
glColor3f(0.f, 1.f, 0.f); 
glColor3f(0.f, 0.f, 1.f£); 
glEnd () ; 


glVertex2f(-0.4f, 
glVertex2f(0.8f, 
glVertex2f(-0.1f, 


glFlush(); 


) 
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-0.8£); 
-0.8£); 
0.3£); 

0.3£); 


-0.4£); 
-0.1f£); 
0.8£); 


7. Then, before calling glFlush (), we will add the following code to draw a 3D cube: 


// Reset modelview matrix 
glMatrixMode (GL MODELVIEW) ; 
glLoadIdentity(); 


// Transformations 
glTranslatef (0.0, 0. 
glRotatef (rotation, 


0, 
Y. 


// FRONT 

glBegin(GL POLYGON) ; 
glColor3f(0.0, 0.0, O. 
glVertex3f (0.5, -0.5, 
glVertex3f (-0.5, 0.5, 

glEna() ; 


0); 
-0.5); 


-0.5); glVertex3f (-0. 


// BACK 

glBegin(GL POLYGON) ; 
glColor3f(0.0, 1.0, 0. 
glVertex3f (0.5, -0.5, 
glVertex3f (-0.5, 0.5, 

glEna() ; 


0); 
0.5); 
0.5); 


glVertex3f (0.5, 


// RIGHT 

glBegin(GL POLYGON) ; 
glColor3f (1.0, 0.0, 1. 
glVertex3f (0.5, -0.5, 
glVertex3f (0.5, 0.5, 


0); 
-0.5);5 
0.5); glVertex3f (0.5, 


glVertex3f (0.5 


glVertex3f (-0.5, 


glVertex3f (0.5, 


y 06D 
By =0.57 


-0.5);5 
-0.5); 


0.5 
=0:5, 


0.5); 
0.5); 


O. 
-0. 


5, 
5, 
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glEna () ; 


// LEFT 
glBegin(GL POLYGON) ; 
glColor3f(1.0, 1.0, 0.0); 
glVertex3f (-0.5, -0.5, 0.5); glVertex3f(-0.5, 0.5, 0.5); 
glVertex3f (-0.5, 0.5, -0.5); glVertex3f(-0.5, -0.5, -0.5); 
glEna() ; 


// TOP 
glBegin(GL POLYGON) ; 
glColor3f(0.0, 0.0, 1.0); 
glVertex3f (0.5, 0.5, 0.5); glVertex3f (0.5, 0.5, -0.5); 
glVertex3f (-0.5, 0.5, -0.5); glVertex3f(-0.5, 0.5, 0.5); 
glEna() ; 


// BOTTOM 
glBegin(GL POLYGON) ; 
glColor3f(1.0, 0.0, 0.0); 
glVertex3f (0.5, -0.5, -0.5); glVertex3f(0.5, -0.5, 0.5); 
glVertex3f (-0.5, -0.5, 0.5); glVertex3f(-0.5, -0.5, -0.5); 
glEna() ; 


8. Once you are done with that, add a timer to the construction of the MainWindow 
class, like so: 


MainWindow: :MainWindow(QOWidget *parent) 
] 
setSurfaceType (QWindow: : OpenGL Surface) ; 
QSurfaceFormat format; 
format .setProfile (QSurfaceFormat : :CompatibilityProfile); 
format .setVersion(2, 1); // OpenGL 2.1 
setFormat (format) ; 


context = new QOpenGLContext; 
context ->setFormat (format); 
context->createl(); 
context->makeCurrent (this); 


openGLFunctions = context->functions(); 

QTimer *timer = new QTimer(this); 

connect (timer, SIGNAL (timeout()), this, 
SLOT (updateAnimation())); 


timer->start (100); 


rotation = 0; 
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9. Lastly, we increase the rotation variable by 10 every time the updateAnimation () 
slot is called by the timer. We also manually call the update () function to update 
the screen: 


void MainWindow: :updateAnimation () 


( 


rotation += 10; 
this->update (); 


) 


10. If you compile and run the program now, you should see a spinning cube in your 
main window! 


In any 3D rendering, depth is very important and thus we need to enable the depth testing 
feature in OpenGL by calling glEnable (GL_DEPTH_TEST). When we clear the buffer, we 
also must specify GL_DEPH BUFFER BITsothatthe depth information is also being cleared, 
in order for the next image to be rendered correctly. 
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We use gluPerspective () to set up a perspective projection matrix so that the graphics 
appear to have depth and distance. The opposite to the perspective view is the orthographic 
view, which is the default view in OpenGL, and we have used it in our previous example. 
Orthographic projection is a form of parallel projection where objects appear to be flat 

and do not suggest depth and distance: 


Perspective Orthographic 


In this example, we used a timer to increase the rotation value by 10 every 100 milliseconds 
(0.1 second). The rotation value is then applied to the cube by calling glRotatef () before 
supplying the vertex data to OpenGL. We also called glTranslatef () to move the cube 
slightly to the back so that it's not too close to the camera view. 


Remember to call update () manually so that the screen gets refreshed, otherwise the cube 
will not be animated. 


Texturing in OpenGL 


OpenGL allows us to map an image (also referred to as a texture) to a 3D shape or polygon. 
This process is also called texture mapping. Qt appears to be the best combination with 
OpenGL in this case because it provides an easy way to load images that belong to one of the 
common formats (BMP, JPEG, PNG, TARGA, TIFF, and so on) and you don't have to implement 
it by yourself. We will use the previous example with a spinning cube and try to map it with 

a texture! 


How to do it... 


1. First of all, open Up mainwindow.h and add the following header to it: 
Hinclude <QGIWidget> 

2. Next, declare an array that stores the texture IDs created by OpenGL. We will be using 
it later when it comes to rendering: 


private: 
QOpenGLContext* context; 


Q0O0penGLFunctions* openGLFunctions; 


float rotation; 
GLuint texID[1]; 
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3. After that, open Up mainwindow.cpp and add the following code to 
initializeGL() to load the texture file: 


void MainWindow::initializeGL() 
( 
// Enable Z-buffer depth test 
glEnable (GL_ DEPTH TEST); 


// Enable texturing 
glEnable(GL_TEXTURE_ 2D); 


QImage image ("bricks"); 
QImage texture = QGLWidget: :convertToGLFormat (image) ; 


glGenTextures (1, £texID[0Ol); 
glBindTexture (GL _TEXTURE_ 2D, texID[0]); 


glTexParameteri (GL_TEXTURE 2D, GL TEXTURE MIN FILTER, GL_ 
NEAREST) ; 


glTexParameteri (GL_TEXTURE_2D, GL TEXTURE_MAG FILTER, GL_ 
NEAREST) ; 


glTexImage2D(GL TEXTURE 2D, 0, GL _RGBA, texture.width(), 
texture.height(), 0, GL RGBA, GL UNSIGNED BYTE, 
texture.bits()); 


// Make sure render at the correct aspect ratio 
resizeGL (this->width(), this->height ()); 


) 


4. Then, add the following code to the paintGL () function to apply the texture to the 
3D cube: 


glEnable(GL_TEXTURE_ 2D); 
glBindTexture(GL TEXTURE_ 2D, texID[0]); 


// FRONT 
glBegin(GL POLYGON) ; 
glColor3f£(0.0, 0.0, 0.0); 
glTexCoord2f(0.0f, 0.0f); glVertex3f (0.5, -0.5, -0.5); 
glTexCoord2f(1.0f, 0.0f); glVertex3f (0.5, 0.5, -0.5); 
glTexCoord2f(1.0f, 1.0f); glVertex3f (-0.5, 0.5, -0.5); 
glTexCoord2f(0.0f, 1.0f); glVertex3f (-0.5, -0.5, -0.5); 
glEna() ; 
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// BACK 

glBegin(GL POLYGON) ; 
glColor3f(0.0, 1.0, 0.0); 
glTexCoord2f(1.0f, 0.0f); glVertex3f 
glTexCoord2f(1.0f, 1.0f); glVertex3f 
glTexCoord2f(0.0f, 1.0f); glVertex3f 
glTexCoord2f(0.0f, 0.0f); glVertex3f 

glEna() ; 


By. 04 -05)3 
5, 05, 0.5); 
=0.57 05), 05) 
=0.5, 0D, 0:05); 


(o 
(0 
( 
( 


// RIGHT 

glBegin(GL POLYGON) ; 
glColor3f(1.0, 0.0, 1.0); 
glTexCoord2f(0.0f, 1.0f); glVertex3f 
glTexCoord2f(0.0f, 0.0f); glVertex3f 
glTexCoord2f(1.0f, 0.0f); glVertex3f 
glTexCoord2f(1.0f, 1.0f); glVertex3f 

glEna() ; 


(0.5 
(0.5 
(0.5 
(0.5 


// LEFT 

glBegin(GL POLYGON) ; 
glColor3f(1.0, 1.0, 0.0); 
glTexCoord2f(1.0f, 1.0f); glVertex3f (- 
glTexCoord2f(0.0f, 1.0f); glVertex3f (- 
glTexCoord2f(0.0f, 0.0f); glVertex3f (- 
glTexCoord2f(1.0f, 0.0f); glVertex3f (- 

glEna() ; 


0 , 50.5, 0.5); 
0.5, 0.5, 0.5); 
0 ,. 0.5, -0.5); 
0 , 20.5, -0.5)5 
// TOP 
glBegin(GL POLYGON) ; 
glColor3f£(0.0, 0.0, 1.0); 
glTexCoord2f(1.0f, 0.0f); glVertex3f 
glTexCoord2f(1.0f, 1.0f); glVertex3f 
glTexCoord2f(0.0f, 1.0f); glVertex3f 
glTexCoord2f(0.0f, 0.0f); glVertex3f (-0. 
glEna() ; 


// Red side - BOTTOM 
glBegin(GL POLYGON) ; 
glColor3f(1.0, 0.0, 0.0); 
glTexCoord2f(0.0f, 0.0f); glVertex3f( 0.5, -0.5, -0.5); 
glTexCoord2f(1.0f, 0.0f); glVertex3f( 0.5, -0.5, 0.5); 
glTexCoord2f(1.0f, 1.0f£); glVertex3f (-0.5, -0.5, 0.5); 
glTexCoord2f(0.0f, 1.0f); glVertex3f (-0.5, -0.5, -0.5); 
glEna() ; 


glDisable(GL_TEXTURE_2D); 
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5.  Ifyou compile and run the program now, you should see a brick cube rotating around 
the screen! 


The variable GLuint texID[1] is an array that stores the texture ID generated by OpenGL 
when we call ylGenTexture (), which OpenGL uses to allocate the texture from the 

memory during rendering. In this case, we set the size of the array to 1 because we are only 
using a single texture in this example. We must tell OpenGL to enable texturing by calling 
glEnable (GL_TEXTURE_2D) before doing anything related to texturing. We used two QImage 
classes to load the texture, the first one called image was used to load the image file, and the 
second one called texture was used to convert the image to an OpenGL-compatible format. 
Then we called glGenTextures () to generate an empty texture using OpenGL, and after that, 
we called yglBindTexture () to select that particular texture. This step was needed so that the 
functions called after that will be applied to the texture that we just selected. 


Next, we called ylTexParameteri () twice to set both the texture minifying and texture 
magnification settings to point sampling. This will tell OpenGL how the texture should be 
rendered. More about that later. After that, we called glTexImage2D () to supply the pixel 
information from the texture file loaded by Qt to the empty OpenGL texture we just created. 
Call ylEnabled (GL_TEXTURE_2D) and glBindTexture () to enable texturing in OpenGL 
and select the texture we wanted to use before we start rendering the 3D cube. Then, we 
must call yl TexCoord2f () before calling glVertex3f () to tell OpenGL how the texture 
should be mapped. We supply the coordinates for the texture and OpenGL will figure out the 
rest for us. 


Once you're done, call ylDisable (GL_TEXTURE_2D) to disable texturing. 


[117] 
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Lighting and texture filter in OpenGL 


In this example, we will learn how to apply different types of filtering effects such as point 
sampling, bilinear interpolation, and trilinear interpolation to the textures we use in OpenGL. 


How to do it... 


1. Again, we will use the previous example and add a light near the spinning cube. Open 
Up mainwindow.cpp and add the following code to the initializeGL () function: 


// Trilinear interpolation 

glTexParameterf (GL_TEXTURE 2D, GL_TEXTURE MIN FILTER, GL LINEAR 
MIPMAP_ LINEAR); 

glTexParameterf (GL_TEXTURE 2D, GL TEXTURE_MAG FILTER, GL LINEAR); 


glTexParameteri(GL TEXTURE_2D, GL GENERATE MIPMAP, GL TRUE); 


glTexImage2D(GL TEXTURE_2D, 0, GL_RGBA, texture.width(), texture. 
height (), 0, GL_RGBA, GL UNSIGNED_ BYTE, texture.bits()); 


// Enable smooth shading 
gl1ShadeModel (GL_ SMOOTH) ; 


// Lighting 

glEnable (GL _LIGHTI1); 

GLfloat lightAmbient[]= [ 0.5£, 0.5£, 0.5£, 1.0£ ); 
GLfloat lightDiffuse[]l= [ 1.0£, 1.0£, 1.0£, 1.0£ ); 
GLfloat lightPosition[]= [ 3.0£, 3.0£, -5.0£, 1.0£ ); 
glLightfv(GL _LIGHT1, GL AMBIENT, lightAmbient); 
glLightfv(GL _LIGHT1, GL DIFFUSE, lightDiffuse); 
glLightfv(GL LIGHT1, GL POSITION, lightPosition); 


// Make sure render at the correct aspect ratio 
resizeGL (this->width(), this->height ()); 


2. Next, go to the paintGL () function and add the following code: 
glEnable(GL LIGHTING); 


// FRONT 
glBegin(GL POLYGON) ; 
glNormal3f(0.0f, 0.0f, 1.0f£); 
glTexCoord2f (0.0f, 0.0f); glVertex3f (0.5, -0.5, -0.5); 
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glTexCoord2f (1.0f, 

glTexCoord2f (0.0f, 
glEna() ; 


// BACK 
glBegin(GL POLYGON) ; 


glNormal3f(0.0f, 0. 


glTexCoord2f (1.0f, 
glTexCoord2f (1.0f, 
glTexCoord2f (0.0f, 
glTexCoord2f (0.0f, 

glEna() ; 

// RIGHT 

glBegin(GL POLYGON) ; 
glNormal3f(0.0f, 1. 
glTexCoord2f (0.0f, 
glTexCoord2f (0.0f, 
glTexCoord2f (1.0f, 
glTexCoorad2f (1.0f, 

glEna() ; 

// LEFT 


glBegin(GL POLYGON) ; 


glNormal3f(0.0f,-1. 
glTexCoord2f (1.0f, 
glTexCoord2f (0.0f, 
glTexCoord2f (0.0f, 
glTexCoord2f (1.0f, 
glEna() ; 
// TOP 


glBegin(GL POLYGON) ; 


glNormal3f(1.0f, 0. 


glTexCoord2f (1.0f£, 

glTexCoord2f (1.0f£, 

glTexCoord2f (0.0f, 

glTexCoord2f (0.0f, 
glEna () ; 


( 
( 
( 
( 


// Red side - BOTTOM 


glBegin(GL POLYGON) ; 
glNormal3f (-1.0f, 


0.0f); glVertex3f (0.5, 0.5, -0.5); 
1.0f); glVertex3f(-0.5, 0.5, -0.5); 
1.0f); glVertex3f(-0.5, -0.5, -0.5); 
0£,-1.0f£); 

0.0f); glVertex3f (0.5, -0.5, 0.5); 
1.0f); glVertex3f(0.5, 0.5, 0.5); 
1.0f); glVertex3f (- 0.5, 0.5); 
0.0f); glVertex3f(-0.5, -0.5, 0.5); 
0f£, 0.0f); 

1.0f); glVertex3f(0.5, -0.5, -0.5); 
0.0f); glVertex3f (0.5, 0.5, -0.5) 
0.0f); glVertex3f£ (0.5, 0.5, 0.5); 
1.0f); glVertex3f(0.5, -0.5, 0.5) 
0£, 0.0f); 

1.0f); glVertex3f(-0.5, -0.5, 0.5); 
1.0f); glVertex3f(-0.5, 0.5, 0.5); 
0.0f); glVertex3f(-0.5, 0.5, -0.5); 
0.0f); glVertex3f(-0.5, -0.5, -0.5); 
0f£, 0.0Of); 

0.0f); glVertex3f (0.5, 0.5, 0.5); 
1.0f); glVertex3f(0.5, 0.5, -0.5); 
1.0f); glVertex3f(-0.5, 0.5, -0.5); 
0.0f);¡glVertex3f(-0.5, 0.5, 0.5); 
.0£, 0.0£); 
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glTexCoord2f(0.0f, 0.0f); glVertex3f (0.5, -0.5, -0.5); 

glTexCoord2f(1.0f, 0.0f); glVertex3f(0.5, -0.5, 0.5); 

glTexCoord2f (1.0f, 1.0f); glVertex3f(-0.5, -0.5, 0.5); 

glTexCoord2f (0.0f, 1.0f); glVertex3f(-0.5, -0.5, -0.5); 
glEnd(); 


glDisable (GL_LIGHTING); 


3. Ifyou compile and run the program now, you should see the lighting in action! 


[a] eS 


In the fixed pipeline, it's extremely easy to add lights to your scene. First, we need to choose 
which shading model we want OpenGL to use. In our case, we chose the smooth shading 
model by calling glShaderModel (GL_SMOOTH). Alternatively, you can also pick the flat 
shading model by calling glShaderModel (GL_FLAT): 


GL_FLAT GL_SMOOTH 
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After that, enable the first light in OpenGL by calling glEnable (GL_LIGHT1). Since there 
is a limited number of lights allowed in the fixed pipeline, the names of the lights are all 
static: GL_LIGHT1,GL_LIGHT2,GL_L1GHT3, and so on. Next, we created three arrays 
that store the color of the ambient light, the color of the diffuse light, and the position of the 
diffuse light. Ambient light is the environment lighting, which affects the entire scene and 
has no position. Diffuse light, on the other hand, has a position and area of light influence. 
We then supply this information to OpenGL by calling the glLightfv () functions. Then, in 
paintGL (), we must enable the lighting by calling glEnable (GL_LIGHTING) before we 
start rendering the cube. Without it, you won't see any lighting effects applied to the cube. 


Other than that, we also need to add a surface normal value to every surface of the cube. 
Surface normal indicates where the surface is facing and is used for lighting calculations. Don't 
forget to disable lighting once you're done with it by calling glDisable (GL_LIGHTING). 


Besides adding a light to the scene, we also changed the texture filtering setting to trilinear 
interpolation by calling gl TexParameteri (), which makes the texture looks smoother. 
You can also try out the other two types of filtering, point filtering and bilinear filtering, by 
uncommenting the code. 


The following image shows the distinction between three different types of filtering: 


Point 


Bilinear Trilinear 


Bilinear and trilinear filtering require a mipmap in order to work, which we can ask OpenGL 

to generate by calling gl TexParameteri (GL_TEXTURE_2D, GL GENERATE _MIPMAP, 
GL_TRUE). Mipmaps are pre-calculated, optimized sequences of textures, each of which is 

a progressively lower resolution representation of the same image. OpenGL will switch the 
texture of an object to a lower resolution mipmap when moving further away from the camera, 
which is effective for avoiding visual artifacts. 
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Ina 3D scene, lighting is a very important aspect that helps to define the 3D shape of an 
object. A light doesn't just make the surfaces facing the light become brighter, but it also 
makes other surfaces that are blocked become darker. 


In OpenGL, at least in the fixed-function pipeline, you can only add a limited number of lights 
to the scene. The number of lights is limited by the graphics chip - some support up to four 
lights, some support up to eight, and some support up to 16. However, since the fixed-function 
pipeline is slowly being phased out and people are starting to use the programmable pipeline, 
this problem has been solved. In the programmable pipeline, you can have any number of 
lights in the scene; however, the lighting model will need to be coded entirely by you in the 
shaders, which is not an easy task. 


In the fixed-function pipeline, if you want to add more lights than what your graphics chip 
supports, what you can do is to turn off lights that are further away from the camera view and 
only turn on a few that are closer to your camera view. The disadvantage of this method is that 
you may see the lights popping on and off while walking along a maze, for example. 


Moving an object using keyboard controls 


In this topic we'll be looking at is how to move an object in OpenGL using keyboard 
controls. Qt provides an easy way to detect keyboard events using virtual functions, namely 
keyPressEvent () and keyReleaseEvent (). We will be using the previous example 
and adding to it. 


How to do it... 


1. Open Up mainwindow.h and declare two floating point numbers called moveX 
and moveZ: 
private: 
QOpenGLContext* context; 


Q0O0penGLFunctions* openGLFunctions; 


float rotation; 
GLuint texID[1]; 


float moveX; 
float moveZ; 
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public: 
explicit MainWindow(QWidget *parent = 
-MainWindow () ; 


void keyPressEvent (QKeyEvent *event); 


2. After that, declare the keyPressEvent () function, like so: 


0); 


Chapter 4 


Then, open up mainwindow. cpp and set the default values for the two variables we 


just declared: 


MainWindow: :MainWindow(QWidget *parent) 


( 


setSurfaceType (QWindow: :OpenGLSurface) ; 


OSurfaceFormat format; 


format .setProfile (QSurfaceFormat : :CompatibilityProfile); 


format .setVersion(2, 1); // OpenGL 2.1 
setFormat (format); 


context = new QOpenGLContext; 
context ->setFormat (format); 
context->createl( ); 
context->makeCurrent (this); 


openGLFunctions = context->functions/(); 


QTimer *timer = new QTimer (this); 
connect (timer, SIGNAL (timeout()), this 

SLOT (updateAnimation())); 
timer->start(100); 


rotation = 0; 
moveX = 0; 
moveZ = 0; 


r 


r 


1 
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4. Next, we will implement the keyPressEvent () function: 


void MainWindow: :keyPressEvent (QKeyEvent *event) 


( 


if (event->key() == Ot: :Key W) 
( 
moveZ -= 0.2; 
, 
if (event->key() == Ot: :Key_S) 


moveZ += 0.2; 


if (event->key() == Ot: :Key_A) 
( 
moveX -= 0.2; 
) 
if (event->key() == Ot: :Key_D) 


moveX += 0.2; 


) 


5. After that, we call ylTranslatef () before drawing the 3D cube and putting both 
moveX and moveZ into the function. Also, we disabled the rotation so that it's easier 
to see the movement: 


// Transformations 

glTranslatef (0.0, 0.0, -3.0); 
glRotatef (rotation, 1.0, 1.0, 1.0); 
glTranslatef (moveX, 0.0, moveZ); 


// Texture mapping 
glEnable(GL TEXTURE 2D); 
glBindTexture (GL _ TEXTURE_2D, texID[0]1); 


glEnable (GL_ LIGHTING); 
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6.  Ifyou compile and run the program now, you should be able to move the cube around 
by pressing W, A, S and D: 


[1] 


Basically, what we did here was add or subtract the moveX and moveZz values when a key ¡is 
pressed. In keyPressEvent (), we checked whether the keyboard button pressed was W, A, 
S, or D. Then, we add or subtract 0.2 from the variables accordingly. To get the full list of key 
names used by Qt, visit http: //doc.qt.io/qt-5/qt.html+Key-enum. 


When we hold down the same key and don't release it, Qt will repeat the key press event after 
an interval. The keyboard input interval varies between different operating systems. You can 
set the interval by calling O0Application::setKeyboardInterval (), but this may not 
work in every operating system. We called ylTranslatef (moveX, 0.0, moveZ) before 
drawing the cube, which moves the cube around when we press W, A, $, or D. 


3D canvas in QML 


In this recipe, we will learn how to render 3D images using Qt's powerful QML scripting 
language. 
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How to do it... 


1. Let's start this example by creating a new project in Qt Creator. This time around, we 


will create Qt Canvas 3D Application and not the other options that we chose in all 
previous examples: 


Choose a template: 
Projects El ot widgets Application 

Application ES] Ot Console Application 
Library <4 Ot Quick Application 
Other Project 4 Qt Quick Controls Application 
Non-0t Project NY Ot Canvas 3D Application 

| Import Project 

Files and Classes 


2. After that, Qt Creator will ask you whether to create a project that is based on 
three.jJs. Leave the option checked and press the Next button to proceed: 


€ y QOtCanvas 3D Application 


Define Project Details 
Location 


E) Details 1] Create a three.js based application. 
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Once the project is created, you will notice there are some JavaScript (. j s) files 
already added to your project's resources. This is normal as the Qt Canvas 3D 
application uses JavaScript and WebGL technology to render 3D images on screen. In 
this case, ¡it's running a WebGL-based rendering library called three.js, which makes 
our programming job simpler and easier compare to writing pure WebGL code: 


Y | Qt Canvas 3D 
[ Ot_Canvas_3D.pro 
v deployment 
 deployment.pri 
v [A Sources 
HE main.cpp 
e Resources 
Y 8 qml.qre 
v $ 
$8 glcode.s 
ami main.qml 
Gé threejs 


Next, add an image file to our project resources as we'll be using it in this example. 
Open up qml . qre with Qt Creator by right-clicking on it in the Projects pane and 
select Open in Editor. Once the resources file is opened by Qt Creator, click the Add 
button, followed by the Add File button, then select the image file you want from your 
computer. In my case, l've added a bricks.png image, which will be used as the 
surface texture for our 3D object: 


Window Help 


u $ a FE qml.qrc* 
v 3 Fl 
así main.qml 
(8 glcode.,js 
(58 three.s 
3 bricks.jpg 


Add y Remove Remove Missing Files 


Properties 
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5. 


After that, open Up gl1code.]3s using Qt Creator. You will see there is already plenty of 
code written in the file. What ithis does is basically render a simple 3D cube on screen 
using the three .j3s library. You can build the project right away and run it to see what 
it looks like. However, we will change the code a little bit to customize its output. 


Inthe initializeGL () function, we'll add a directional light to the scene, load the 
texture file we just added to our project resources, and then apply the texture to the 
material that defines the surface properties of the 3D cube. Also, we will make the 
scale of the cube slightly bigger by setting its scale to 3 in all dimensions: 


function initializeGL (canvas) ( 
scene = new THREE.Scene(); 


camera = new THREE.PerspectiveCamera (75, canvas.width / canvas. 
height, 0.1, 1000); 
camera.position.z = 5; 


var directionalLight = new THREE.DirectionalLight (Oxffffff); 
directionalLight.position.set(1, 1, 1).normalize(); 
scene.add (directionalLight); 


var texture = THREE.ImageUtils.loadTexture('bricks.jpg'); 


var material = new THREE.MeshBasicMaterial(([ map: texture )); 
var cubeGeometry = new THREE.BoxGeometry(3, 3, 3); 

cube = new THREE.Mesh (cubeGeometry, material); 
cube.rotation.set(0.785, 0.785, 0.0); 

scene.add (cube) ; 


renderer = new THREE.Canvas3DRenderer ( 


[ Canvas: Canvas, antialias: true, devicePixelRatio: canvas. 
devicePixelRatio )); 


renderer.setSize(canvas.width, canvas.height); 


) 


Then, in the paintGL () function, add an extra line of code to rotate the 3D cube 
before rendering the scene: 


function paintGL (canvas) ( 
cube.rotation.y -= 0.005; 
renderer.render (scene, camera); 


) 


| personally find the window size is a little too large, so | also changed the width and 
height of the window in main. qml file: 

import OtQuick 2.4 

import OtCanvas3D 1.0 

import OtQuick.Window 2.2 
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import "glcode.js" as GLCode 


Window ( 
title: qsTr("Q0t_Canvas_3D") 
width: 480 


height: 320 


visible: true 


Canvas3D ( 
id: canvas3d 
anchors.fill: parent 
focus: true 


onInitializeGL: ( 
GLCode.initializeGL(canvas23d); 


onPaintGL: ( 
GLCode.paintGL(canvas23d) ; 


onResizeGL: ( 
GLCode.resizeGL (canvas3d); 


) 


Once you're done, let's build and run the project. You should be able to see a 3D cube 
with a brick texture, spinning slowly on the screen: 


| Ot Canvas_3D = O Xx 
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Originally, three .jJs was a cross-browser JavaScript library/APl that used WebGL technology 
to display animated 3D computer graphics in a web browser. Qt Canvas 3D, however, also 
uses web technology, specifically the WebGL technology, to render 3D images like it would 

on a web browser. This means that not only is three .j s supported on Qt Canvas 3D, but all 
the different types of library that are based on WebGL technology will work flawlessly on Qt 
Canvas 3D. However, Qt Canvas 3D only works on QML-based projects and does not work 

in C++, 


If you're interested to learn more about three. js, check out their website at 
ES http: //threejs.org. 
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Application with Qt5 


In this chapter, we will cover the following recipes: 


» Setting up Qt for mobile applications 

»  Designing a basic user interface with QML 
» Touch events 

» Animation in QML 

>» Displaying information using model views 
»  IntegratingQML and C++ 


Introduction 


Qt is not only a cross-platform software development kit for PC platforms, it also supports 
mobile platforms such as ¡OS and Android. The developers of Qt introduced Qt Quick back in 
2010, which provides an easy way to build custom user interfaces that are highly dynamic, 
where users can easily create fluid transitions and effects with only minimal coding. Qt Quick 
uses a declarative scripting language called QML, which is similar to the JavaScript language 
used in web development. Advanced users can also create custom functions in C++ and port 
them over to Qt Quick to enhance its functionality. At the moment, Qt Quick supports multiple 
platforms such as Windows, Linux, Mac, ¡OS, and Android. 
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Setting up Qt for mobile applications 


In this example, we will learn how to set up our Qt project in Qt Quick and enable it to be build 
and exported to mobile devices. 


How to do it... 


1. First of all, let's create a new project by going to File | New File or New Project. 
Then, a window will pop up for you to choose a project template. Select Qt Quick 
Application and click the Choose button: 


Choose a template: All Templates 3 


| Projects | A Ot Widgets Application 
Application 01 Console Application 
| Library | 41 Qt Quick Application 
Other Project | 4 Qt Quick Controls Application 
| Non-Qt Project | NY Ot Canvas 3D Application 
| Import Project | 


Creates a deployable Qt Quick 2 application. 


||. Supported Platforms: Desktop 


| Files and Classes 
| C++ 

Qt 

GLSL 

General 


| Java 


| Python 


2. After that, insert the project name and select the project location. Click the Next 
button and it will ask you to select the minimum Qt version required for your project. 
Please make sure that you select a version that exists on your computer, otherwise 
you won't be able to run it properly. Once you have done that, proceed by clicking the 
Next button. 


3. Then, Qt Creator will ask you which kit you want to use for your project. These "kits" 
are basically different compilers that you can use to compile your project for different 
platforms. Since we're doing an application for a mobile platform, we will enable the 
Android kit (or the ¡OS kit if you're running a Mac) in order to build and export your 
app to your mobile device. Do note that you need to configure the Android kit if you're 
using it for the first time, so that Qt can find the directory of the Android SDK. Click 
Next once you're done with it: 
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Kit Selection 


Location 
Details Qt Creator can use the following kits for project Setting_Up_Qt_for_Mobile_App: 
BD Kits Y] Select all kits 


Summary 


£) Android for armeabi-v7a (GCC 4.9, Qt 5.5.1) 


Y E Desktop Qt 5.5.1 MinGW 32bit 


EX Desktop Qt 5.6.0 MSVC2013 64bit 


O El Desktop Qt 5.6.0 MSVC2015 64bit 


4. Once the project has been created, Qt Creator will automatically open up a file from 
your project, called main. qm1. You will see something like this on screen, which is 
very different from your usual C/C++ project: 

import OtQuick 2.3 

import OtQuick.Window 2.2 


Window ( 
visible: true 


MouseArea ( 
anchors.fil1l: parent 
onClicked: ( 


Ot.quit (); 
) 
) 
Text ( 
text: qsTr("Hello World") 
anchors.centerln: parent 
) 
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5. Build and run the project now by clicking on the green arrow button located at the 
bottom-left corner of your Qt Creator. If you set the default kit to Desktop, a window 
will pop up which looks something like this: 


[a] as 


Hello World 


6. We can switch between different kits by going to the Projects interface and 
selecting the kit you want your project to be built with. You can also manage all the 
kits available on your computer, or add a new kit to your project from the Projects 
interface: 


wr Build Settings 
Edit build configuration: Debug Y Add y Remad 


General 


Shadow build:  |Y; 
Build directory: 'Chapter 5lSetting_Up_Qt_for_Mobile_App'H 


Analyze 


7.  Ifthis is your first time building and running your project, you need to create a 
template for the Android kit under the Build settings. Once you have clicked the 
Create Templates button, Qt will generate all the files required to run your app on an 
Android device. If you don't plan to use Gradle in your project, disable the option Copy 
the Gradles files to Android directory. Otherwise, you may encounter problems when 
trying to compile and deploy your app to your mobile device: 
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Ta 


A CE | too | cocesie | Dependences | 


o Appication 
ol Android build SDK: android-21 

'ebug 

N Sign package 
Projects Keystore: || Browse... | 

Z Sign package 
Analyze Certificate alias: 

(2) Qt Deployment Advanced Actions 

Help (O Use Ministro service to install Qt Use Gradle 

(8) Bundle Qt libraries in APK Open package location after build 
y ibraries to temporary directory Verbose output 


Android 


Create Templates 


Release 


Additional Libraries 
f 


8. Once you have created the template, press the Run button and now you should see a 
window popping up, asking which device it should export to: 


Compatible devices 
04d266c900d489ed 


incompatible devices 


Nexus_5_API_21_x86 OpenGL enabled 
ABI is incompatible, device supports ABIs: x86. 


My device is missing 
Always use this device for architecture armeabi-v7a 


[Refresh Device List! — [Create Android Virtual Device 
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9. Select the device that is currently connected to your computer and press the OK 
button. Wait for a while for it to build the project, and you should see something 
like this on your mobile device: 


O Y 4 0 100% 8:30 


Hello World 


A Qt Quick application project is quite different from a form application project. You will be 
writing QML script most of the time instead of writing C/C++ code. 


The Android Software Development Kit (SDK), Android Native Development Kit (NDK), Java 
Development Kit (JDK), and Apache Ant are required to build and export your app to the 
Android platform. Alternatively, you can also use Gradle instead of Apache Ant for your Android 
kit. All you need to do is to enable the Use Gradle instead of Ant option and provide Qt with 
Gradle's installation path. Note that Android Studio is currently not supported by Qt Creator: 
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Filter Android 


- A Android Ci ti 
(um) Environment as 


JOK location: | C: Program Files (x86)Javalidk1.6.0_45 


Android SDK location: [C:android-sdk-windoms 
Android NDK location: | C:landroid-ndk+10e 
Found 8 toolchains for this NDK, 


vY| Automatically create kits for Android tool chains 


YN Qt versions for 4 architectures are missing. 
To add the Qt versions, select Options > Build 4 Run > Qt Versions. 


Use Gradle instead of Ant 


Ant executable: C:lapache-ant-1.9.6lbintant.bat Browse... 
Q Debugger 


A É AVD Manager System/data partition size: |1024Mb '+| [Start AVD Manager... 
, Designer 


AVD Name AVD Target CPU/ABI Add... 


EN Analyzer 


Nexus_5_API_21_x86 API21 x86 
TD : 
Version Control 


FS Code Pasting Y 


If you're running the app on an Android device, make sure that you have enabled USB 
Debugging Mode. To enable USB Debugging Mode, you need to first enable the developer 
options on your Android device by going to Settings | About Phone and tap the Build Number 
seven times. After that, go to Settings | Developer Options and you will see the Android 
Debugging option in the menu. Enable that option and you can now export your app to your 
device for testing. 


To build for the ¡OS platform, you need to run Qt Creator on a Mac and make sure the latest 
XCode is installed on your Mac as well. 


To test your app on an ¡OS device, you need to register a developer account with Apple, 
register your device at the developer portal, and install the provisioning to your XCode, which 
is a lot trickier than Android. You will be given access to the developer portal once you have 
obtained a developer account from Apple. 
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Designing a basic user interface with QML 


In this example, we will learn how to use Qt Quick Designer to design our program's user 
interface. 


How to do it... 


1. First of all, create a new Qt Quick application project, just like we did in the previous 
recipe. You can also use the previous project files if you wish to. 


2. You will see two QML files in your project resources—main.qml and MainForm. 
ui .qml. The former is where we implement the logic for our application, and the 
latter is where we design our user interface. We will start with the Ul design, so let's 
open Up MainForm.ui.qml. Once it's been opened by Qt Creator, you will see an 
entirely different Ul editor compared to the one we used in previous chapters. This 
editor is called the Qt Quick Designer, which is used specifically to design Ul for Qt 
Quick projects. The components of this editor are described as follows: 


a Library: The Library window displays all the predefined QML types that you 
can add to your Ul canvas. You can also import custom Qt Quick components 
from the Import tab and display them here. 


o Navigator: The Navigator window displays the items in the current QML file 
in a tree structure. 


a Connections: You can use the tools provided in the Connections window to 
connect objects to signals, specify dynamic properties for objects, and create 
bindings between the properties of two objects. 


o State: The State window displays the different states of an item. You can 
add a new state for an item by clicking on the + button on the right of the 
State window. 


o Canvas: The canvas is where you design your program's user interface. You 
can drag and drop a Qt Quick component from the Library window onto the 
canvas and instantly see what it will look like in the program. 


o Properties: This is where you change the properties of a selected item. 
3. Select everything under the Rectangle object (mouseArea and Text) in the Navigator 
window and delete them. 


4. We're about to make a simple login screen. From the Library window, drag two text 
widgets onto the canvas. 
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5. Setthe text properties of both the text widgets to Username: and Password: 


Te Advanced 


Alignment 


AutoText 


6. Drag two rectangles from the Library window to the canvas, then drag two text input 
widgets onto the canvas and parent each of them to the rectangles you just added 
to the canvas. Set the border property of the rectangles to 1 and the radius to 5. 
Then, set the echo mode of one of the text fields to Password. 


7. Now we're going to manually create a button widget by combining a mouse area 
widget with a rectangle and a text widget. Drag a mouse area widget onto the canvas, 
then drag a rectangle and a text widget onto the canvas and parent them both to the 
mouse area. Set the color of the rectangle to tHodbdba, then set its border property 
to 1 and its radius to 5. Then, set the text to Login and make sure the size of the 
mouse area is the same as the rectangle. 


8. After that, drag another rectangle onto the canvas to act as the container for the 
login form so that it will look neat. Set its border color to 45e5858 and its 
border property to 2. Then, set its radius property to 5 to make its corners 
look a little rounded. 

9. Make sure the rectangle that we added in the previous step is positioned at the top of 
the hierarchy in the Navigator window so that it appears behind all the other widgets. 
You can arrange the widget positions within the hierarchy by pressing the arrow 
buttons located at the top of the Navigator window: 


“ww Qt Quick - Positioner 


PI MN E 13 


rectangled Move up (CTRL + Up). 


rectangle5 
loginButton 
rectanglel 
T text3 
T textl 


Ji 1 ta 
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10. 


12. 


13. 


14. 


Next, we will export three widgets—-mouse area and the two text input wdgets—as 
alias properties of the root item so that later on we can access these widgets from 
the main. qml file. The widgets can be exported by clicking on the small icon behind 
the widget name and making sure the icon changes to the On status: 


Navigator 
rectangle4 
rectangle5 
v loginButton 
rectangle1 
T text3 
T textl 
T text2 
v rectangle2 


+= userInput 


v rectangle3 


AAA e 


00 00000u0.0An00 


ta passinput 


Now let's open up main. qm1l. Qt Creator will not open this file in Qt Quick Designer 
by default, but instead, it will be opened with the Script Editor. This is because all the 
Ul design-related tasks were done in MainForm.ui.qml, and main.qml is only for 
defining the logic and functions that will be applied to the Ul. You can, however, open 
it with Qt Quick Designer to preview the Ul by clicking on the Design button located in 
the side bar on the left of the editor. 


At the top of the script, add the third line to import the dialog module to main. qml, 
like so: 

import OtQuick 2.5 

import OtQuick.Window 2.2 

import OtQuick.Dialogs 1.2 


After that, replace the code below it with this: 


Window ( 
visible: true 
width: 360 


height: 360 


www.it-ebooks.info 


Chapter 5 


MainForm ( 
anchors.fill: parent 
loginButton.onClicked: ( 
messageDialog.text = "Username is " + 
userInput.text + " and password is " + 
passInput.text 
messageDialog.visible = true 


MessageDialog ( 
id: messageDialog 
title: "Fake login" 
TOXxXEs 05 
onAccepted: ( 
console.log("You have clicked the login button") 


Qt .quit () 


) 


15. Build and run this program on your PC and you should get a simple program that 
shows a message box when you click on the Login button: 


Username: 


Password: 


? *x | 


KR" Fake login 


Username is user and password is 
pass 


oK 
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Since Qt 5.4, a new file extension called .ui.qm1 has been introduced. The QML engine 
hanadles it like the normal . qm1 files, but forbids any logic implementation to be written in 
it. lt serves as the Ul definition template, which can be reused in different . qml1 files. The 
separation of Ul definition and logic implementation improves the maintainability of QML 
code and creates a better workflow. 


All the widgets under Qt Quick - Basic are the most basic widgets that we can use to mix and 
match and create a new type of widget. In the previous example, we have learned how to put 
three widgets together—a text, a mouse area, and a rectangle, to form a button widget. 


If you're lazy, however, you can import pre-made modules to your Qt Quick project by going to 

the Imports tab in the Library window and clicking the <Add Import> button. Then, select the 
module you want to add to your project from the drop-down list. You can also create your own 
Qt Quick module once you have advanced in both QML scripting and C++ programming; 


QML Types Resources 


<Add Import> 
X  QtQuick 2.5 


QtQuick.Dialogs 1.2 


QtQuick. Window 2.2 


We imported OtQuick.dialogs module in main.qml and created a message box that 
displays the user name and password filled in by the user when the Login button is pressed, 
so that we can prove that the Ul function is working. If the widgets are not exported from 
MainForm.ui.qml, we will not be able to access its properties in main. qml. 


At this point, we can export the program to ¡OS and Android, but the Ul may not look accurate 
on some of the devices that have higher resolution or higher Density-per-Pixel (DPI) unit. We 
will cover this issue later on in this chapter. 


In this section, we will learn how to develop a touch-driven application that runs on mobile 
devices using Qt Quick. 
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How to do it... 


1. First of all, create a new Qt Quick application project. 


2. In Qt Creator, right-click on qm1 . qre and select Open in Editor. Then, click Add | 
Add Files and add tux. png to the project: 


Hb / 


ae main.qml 


ari MainForm.ui.qmi 
A tux.png 


Remove Remove Missing Files 


3. Next, open Up MainForm.ui.qml. Drag an image widget from the Library window to 
the canvas. Then, set the source of the image to tux. png and set its £i11mode to 
PreserveAspectFit. After that, set its width to 200 and its height to 220. 


4. Make sure both the mouse area widget and the image widget are exported as alias 
properties of the root item by clicking on the small icon besides their respective 
widget name. 


5. After that, switch over to the Script Editor by clicking on the Edit button on the side 
bar located at the left side of the editor. We need to change the mouse area widget 
to a multi-point touch area widget, like so: 


MultiPointTouchArea ( 
id: touchArea 
anchors.fill: parent 
touchPoints: l[ 
TouchPoint ([ id: point1 ), 
TouchPoint ([ id: point2 ) 
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6. We also set the Image widget to be automatically placed at the center of the window 
by default: 


Image ( 
id: tux 
x: (window.width / 2) - (tux.width / 2) 
y: (window.height / 2) - (tux.height / 2) 
width: 200 
height: 220 
fillMode: Image.PreserveAspectFit 
source: "tux.png" 


) 
The final Ul should look something like this: 


7 EE 


P91yynoj] 


Navigator 


window 


touchArea 


tux 


ZA 


7. Once you're done with that, let's open Up main. qml. First, clear everything within the 
MainForm object except anchors.fil1l: parent, like so: 
import OtQuick 2.5 
import OtQuick.Window 2.2 


Window ( 
visible: true 


MainForm ( 
anchors.fill: parent 
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After that, declare several variables within the MainForm object that will be used 
to rescale the image widget. If you want to know more about the property keyword 
used in the following code, check out the There's more... section at the end of 


this example: 
property in 
property in 
property in 
property in 


property in 
property in 
property in 
property in 


property in 
property in 


prevPointX: 0 
prevPointY: 0 
curPointX: 0 
curPointY: 0 


prevDistX: 0 
prevDistY: 0 
curDistX: 0 
curDistY: 0 


tux.width 
tux.height 


tuxWidth: 
tuxHeight : 


Next, we will define what will happen when our finger touches the multi-point area 
widget. In this case, we will save the positions of the first and second touch points if 
more than one finger touches the multi-point touch area. We also save the width and 
height of the image widget so that later on we can use these variables to calculate 
the scale of the image when the fingers start to move: 


touchArea.onPressed: 


( 


1f (touchArea.touchPoints [1 


( 


1f (touchArea 


.pressed) 


.touchPoints[1].x < touchArea.touchPoints [0] .x) 


prevDistX = touchArea.touchPoints[1].x - 
touchArea.touchPoints[0].x 
else 
prevDistX = touchArea.touchPoints[0].x - 
touchArea.touchPoints [1] .x 


1f (touchArea 


.touchPoints[1].y < touchArea.touchPoints[0].y) 


prevDistY = touchArea.touchPoints [1] .y - 
touchArea.touchPoints[0].y 
else 
prevDistY = touchArea.touchPoints[0].y - 
touchArea.touchPoints [1] .y 
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tuxWidth = tux.width 
tuxHeight = tux.height 


) 
) 


The following image shows the example of touch points being registered when 

two fingers are touching the screen, within the touchArea boundary. touchArea. 
touchPoints![0] is the first registered touch point and touchArea. 
touchPoints [1] is the second. We then calculate the X and Y distance between 
the two touch points and save them as prevDistX and prevDistY: 


touchArea 


touchArea.touchPoints[0] 


y prevDistX 
o 


prevDistY 


touchArea.touchPoints[1] 


10. After that, we will define what will happen when our fingers move while remaining 


in contact with the screen and still within the boundary of the touch area. At this 
point, we will calculate the scale of the image by using the variables we saved in the 
previous step. At the same time, if we detect that only a single touch is found, then 
we will move the image instead of altering ¡ts scale: 
touchArea.onUpdated: ( 

if (!touchArea.touchPoints[1].pressed) 


( 


tux.x += touchArea.touchPoints[0].x - 
touchArea.touchPoints[0] .previousX 
tux.y += touchArea.touchPoints[0].y - 
touchArea.touchPoints[0] .previousY 

) 


else 


( 


1f (touchArea.touchPoints [1] .x < 
touchArea.touchPoints[0].x) 


www.it-ebooks.info 


Chapter 5 


curDistX = touchArea.touchPoints [1] .x - 
touchArea.touchPoints[0].x 

else 

curDistX = touchArea.touchPoints[0].x - 
touchArea.touchPoints [1] .x 


if (touchArea.touchPoints[1].y < 
touchArea.touchPoints[0].y) 
curDistY = touchArea.touchPoints [1] .y - 
touchArea.touchPoints[0].y 
else 
curDistY = touchArea.touchPoints[0] .y - 
touchArea.touchPoints [1] .y 


tux.width = tuxWidth + prevDistX - curDistX 
tux.height = tuxHeight + prevDistY - curDistY 


) 


The following image shows the example of moving touch points - touchArea.. 
touchPoints[0] moved from point A to point B while touchArea. 
touchPoints [1] moved from point C to point D. We can then determine how 
many units have the touch points moved by looking at the differences between 
the previous X, Y variables with the current ones: 


touchArea 


touchArea.touchPoints[0] (moving from A to B) 


: .previousX 
.previousX .previousY 
.previousY o 


O 
Dx 
y 
touchArea.touchPoints[1] (moving from C to D) 
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11. You can now build and export the program to your mobile device. You will not be 
able to test this program on a platform that does not support multi-touch. Once the 
program is running on the mobile device (or desktop/laptop that supports multi- 
touch), try two things: put only one finger on the screen and move it around, and put 
two fingers on the screen and move them in opposite directions. What you should see 
is that the penguin will be moved to another place if you use only one finger, and it 
will be scaled up or down if you use two fingers: 


OVA 9 43% 5:03 DVA 9 43% 5:03 OVA 9 43% 5:03 


19) 


When a finger touches the screen of the device, the multi-point touch area widget triggers 
the onPressed event and registers the position of each of the touch points in an internal 
array. We can get this data by telling Qt which touch point you want to get access to. The first 
touch will bear the index number of 0, the second touch will be 1, and so on. We will then 
save this data into variables so that we can retrieve it later to calculate the scaling of the 
penguin image. 


When one or more fingers remain in contact with the screen while moving, a multi-point touch 
area will trigger the onUpdate event. We will then check how many touches there are—if 

only one touch is found, we will just move the penguin image based on how much our finger 
has moved. If there is more than one touch, we will compare the distance between the two 
touches and compare this with the previous variables we have saved, to determine how much 
we should rescale the image. 
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1. onPressed 2. onUpdated 


nio A 


e 


We must also check whether the first touch is on the left side of the second touch or the right 
side. This way we can prevent the image from being scaled in the inverse direction of the 
finger movement and producing an inaccurate result. 


As for the movement of the penguin, we will just get the difference between the current touch 
position and the previous one, add that to the coordinate of the penguin, and it's done. A 
single touch event is usually a lot simpler and more straightforward than a multi-touch event. 


In Qt Quick, all its components have built-in properties such as width, height, color, and so on 
that are attached to the components by default. However, Qt Quick also allows you to create 
your own custom properties and attach them to the components you declared in your QML 
script. A custom property of an object type may be defined in an object declaration in a QML 
document by adding the property keyword before the type keyword, for example: 


property int myValue; 
You can also bind the custom property to a value by using a colon ( :) before the value, like so: 
property int myValue: 100; 


To learn more about the property types supported by Qt Quick, check out this link: 
http://doc.qt.io/qt-5/qtqml-typesystem-basictypes.html 


Animation in QML 


Qt allows us to easily animate a Ul component without writing a bunch of code. In this 
example, we will learn how to make our program's Ul more interesting by applying 
animations to it. 
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How to do it... 


1. 


Once again, we will start everything from scratch. Therefore, create a new Qt Quick 
application project in Qt Creator and open up MainForm.ui.qml. 


Go to the Imports tab in the Library window and add a Qt Quick module called 
QtQuick.Controls to your project. 


After that, you will see a new category appear in the QML Types tab called Qt Quick - 
Controls, which contains many new widgets that can be placed on the canvas. 


Next, drag three button widgets to the canvas and set their height to 45. Then, go to 
the Layout tab on the Properties window and enable both the left and right anchors 
for all the three button widgets. Make sure the target for the anchors are set to 
Parent and the margins remain as 0. This will make the buttons resize horizontally 
according to the width of the main window. After that, set the y value of the first 
button to 0, the second to 45, and the third to 90. The Ul should now look like this: 


Now, open up qml .qre with the Editor and add fan.png to the project: 


NY 


ari main.qml 


ari MainForm.ui.qml 


e fan.png 


Then, add two mouse area widgets to the canvas. After that, drag a rectangle widget 
and an image widget on the canvas. Parent the rectangle and image to the mouse 
areas we have just added before this. 
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7. Setthe color of the rectangle to +0000££ and apply fan.png to the image widget. 
Your Ul should now look like this: 


8. After that, export all the widgets in your MainForm.ui.qml as alias properties of the 
root item by clicking on the icons located to the right of the widget name: 


Navigator 
rectangle1 
v mouseAreal 
fan 


w mouseÁrea2 


rectangle2 
( button] 
9 button2 


(9 button3 


(E 


["] 11 


9. Next, we will apply animation and logic to the Ul but we won't be doing it in 
MainForm.ui.qml. Instead, we will do it all in main. qml. 


10. In main.qml, remove the default code for the mouse area and add in a width and 
height for the window so that we get more space to preview: 
import OtQuick 2.5 
import OtQuick.Window 2.2 
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Window ( 
visible: true 
width: 480 
height: 550 


MainForm ( 
anchors.fill: parent 


) 


11. After that, add the code that defines the behavior of the buttons in the MainForm 
widget: 
button1 ( 
Behavior on y [ SpringAnimation ([ spring: 2; 
damping: 0.2 ) ) 


onClicked: ( 
buttonl.y = buttonl.y + (45 * 3) 


) 


button2 ( 
Behavior on y [Í SpringAnimation ( spring: 2; 
damping: 0.2 ) ) 


onClicked: ( 
button2.y = button2.y + (45 * 3) 


) 


button3 ( 
Behavior on y Í SpringAnimation ( spring: 2; 
damping: 0.2 ) ) 


onClicked: ( 
button3.y = button3.y + (45 * 3) 


) 
) 


12. Then, follow this with the behavior of the fan image and the mouse area widget it is 
attached to: 


fan ( 
RotationAnimation on rotation ( 
id: anim01l 
loops: Animation.Infinite 
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from: O 
to: -360 
duration: 1000 


mouseAreal ( 
onPressed: ( 
if (anim01.paused) 
anim01l.resume () 
else 
anim01l.pause() 


) 


13. Last but not least, add the behavior of the rectangle and the mouse area widget it's 
attached to: 


rectangle2 ( 
id: rect2 
state: "BLUE" 
states: [ 
State ( 
name: "BLUE" 
PropertyChanges ( 
target: rect2 
color: "blue" 
7 
», 
State ( 
name: "RED" 
PropertyChanges ( 
target: rect2 
color: "red" 


) 


mouseArea2 ( 


SegquentialAnimation on Xx (f 
loops: Animation.Infinite 
PropertyAnimation f to: 150; duration: 1500 ) 
PropertyAnimation (f to: 50; duration: 500 ) 


) 
onClicked: ( 
if (rect2.state == "BLUE") 
rect2.state = "RED" 
else 


rect2.state = "BLUE" 
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14. If you compile and run the program now, you should see three buttons at the top of 
the window and a moving rectangle at the bottom left, followed by a spinning fan at 
the bottom right. If you click any of the buttons, they will move slightly downward with 
a nice, smooth animation. If you click on the rectangle, it will change color from blue 
to red. Meanwhile, the fan image will pause its animation if you click on it while ¡it's 
animating, and it will resume the animation if you click on it again: 


A) QML_Animation = Xx | 2] QML_Animation = D *x 


a 


Most of the animation elements supported by the C++ version of Qt, such as transition, 
sequential animation, parallel animation, and so on, are also available in Qt Quick. If you are 
familiar with the Qt animation framework in C++, you should be able to grasp this pretty easily. 


In this example, we added a spring animation element to all three buttons that specifically 
tracked their respective y-axes. If Qt detects that the y value has changed, the widget will not 
instantly pop to the new position, but instead it will be interpolated, move across the canvas, 
and perform a little shaking animation when reaching its destination, which simulates the 
spring effect. We just have to write one line of code and leave the rest to Qt. 


As for the fan image, we added a rotation animation element to it and set the duration to 
1000 milliseconds, which means it will complete a full rotation in one second. We also set it 
to loop its animation infinitely. When we clicked on the mouse area widget it's attached to, 
we just called pause () Or resume () to enable or disable the animation. 
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Next, for the rectangle widget, we added two states to it, one called BLUE and one called 
RED, each of which carries a color property that will be applied to the rectangle upon state 
change. At the same time, we added a sequential animation group to the mouse area widget 
that the rectangle is attached to, and then added two property animation elements to the 
group. You can also mix different types of group animation; Qt can handle this very well. 


Displaying information using Model View 


Qt includes a Model View framework that maintains separation between the way data is 
organized and managed, and the way that it is presented to the user. In this section, we 
will learn how to make use of the model view, in particular by using the list view to display 
information and at the same time apply our own customization to make it look slick. 


How to do it... 


1. Create a new Qt Quick application project and open up qm1 . qre with Qt Creator. Add 
six images, home . png, map .png, profile.png, search.png, settings.png, 
and arrow.png, to the project: 


Sia / 

ani main.qml 

ari MainForm.ui.qml 
ff home.png 

É£x map.png 

de profile.png 

QA. search.png 

O settings.png 

> arrow.png 


2. After that, open up MainForm.ui .qml. Delete all the default widgets on the canvas 
and drag a List View widget from under the Qt Quick - Views category in the Library 
window onto the canvas. Then, set its Anchors setting to Fill the parent size by 
clicking on the button located in the middle of the Layout window: 


ListView Advanced 


“w Layout 


Anchors 


Th 


Margin 


Target 


Margin 


Target 
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3. Next, switch over to the Script Editor, as we will define what the list view will look like: 


import QtQuick 2.4 


Rectangle ( 
id: rectanglel 


property alias listViewl: listVievi 
property double sizeMultiplier: width / 480 


ListView f 
id: listVievi 
y: 0 
height: 160 
orientation: ListView.Vertical 
boundsBehavior: Flickable.StopAtBounds 
anchors.fill: parent 
delegate: Item (f 
width: 80 * sizeMultiplier 
height: 55 * sizeMultiplier 
Row 4 
id: rowl 
Rectangle ( 
width: listVievl.width 
height: 55 * sizeMultiplier 
gradient: Gradient ( 
GradientStop f position: 0.0; color: "*fIffff" ) 
GradientStop f position: 1.0; color: "*fofofo" ) 
) 
opacity: 1.0 


MouseArea ( 
id: mouseArea 
anchors.fill: parent 


Image t 
anchors.verticalCenter: parent.verticalCenter 
x: 15 * sizeMultiplier 
width: 30 * sizeMultiplier 
height: 30 * sizeMultiplier 
source: icon 


Text ( 
text: title 
font.family: "Courier” 
font.pixelSize: 17 * sizeMultiplier 
x: 55 * sizeMultiplier 
y: 10 * sizeMultiplier 
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Text (f 
text: subtitle 
font.family: "Verdana" 
font.pixelSize: 9 * sizeMultiplier 
x: 55 * sizeMultiplier 
y: 30 * sizeMultiplier 


Image 1 
anchors.verticalCenter: parent.verticalCenter 
Xx: parent.width - 35 * sizeMultiplier 
width: 30 * sizeMultiplier 
height: 30 * sizeMultiplier 
source: "arrow.png" 


7 
model: ListModel ( 
ListElement ( 
title: "Home" 
subtitle: "Go back to dashboard" 
icon: "home.png” 


ListElement ( 
title: "Map" 
subtitle: "Help navigate to your destination" 
icon: "map.png"” 


ListElement ( 
title: “Profile” 
subtitle: "Customize your profile picture" 
icon: "profile.png" 


ListElement ( 
title: “Search” 
subtitle: "Search for nearby places" 
icon: "search.png" 


ListElement ( 
title: "Settings" 
subtitle: "Customize your app settings" 
icon: "settings.png" 
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4. Afterthat, open Up main.qml and replace the code with this: 


import OtQuick 2.4 
import OtQuick.Window 2.2 


Window ( 
visible: true 
width: 480 


height: 480 


MainForm ( 
anchors.fill: parent 


MouseArea ( 
onPressed: rowl.opacity = 0.5 
onReleased: rowl.opacity = 1.0 


5. Build and run the program, and now your program should look like this: 


3] OML_Model Views = [u] Xx 


Home 
Go back to dashboard 


De 


Map 


Help navigate to your destination 


Profile 
Customize your profile picture 


Search 
Search for nearby places 


Settings 


Customize your app settings 


e Ph 
SS ES MS ENS SNS 


Qt Quick allows us to customize the look of each row of the list view with ease. The delegate 
defines what each row will look like and the mode1 is where you store the data that will be 
displayed on the list view. 
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In this example, we added a background with a gradient on each row, then we also added an 
icon on each side of the item, a title, a description, and a mouse area widget that makes each 
row of the list view clickable. The delegate is not static, as we allow the model to change the 
title, description, and the icon to make each row look unique. 


In main. qml, we defined the behavior of the mouse area widget, which will halve its own 
opacity value lower when pressed and return to fully opaque when released. Since all other 
elements, such as title, icon, and so on, are all the children of the mouse area widget, they all 
will also automatically follow their parent widget's behavior and become semi-transparent. 


Also, we have finally solved the display problem on mobile devices with high resolution and 
DPI. It's a very simple trick—first, we defined a variable called sizeMultiplier. The value of 
sizeMultiplier is the result of dividing the width of the window by a predefined value, say 
480, which is the current window width we used for the PC. Then, multiply sizeMultiplier 
by all the widget variables that have to do with size and position, including font size. Do note 
that in this case, you should use the pixelSize property for text instead of pointSize, 

so that you will get the correct display when multiplying by sizeMultiplier. The following 
screenshot shows you what the app looks like on the mobile device with and without 
sizeMultiplier: 


OSA O 89% 1:12 O Y 4 O 97% 1:51 


€ Home dasnboard Z ñA Home > 
A Go back to dashboard 
A MlAbiaate to vour destination ds AAN 
de Rrafileour profile picture Z 
9, Map > 
a Sea FG harbv Places > Pas oracion 
ds Settings app settings Zd Profil 
rotile 
py Customize your profile picture > 
a Search > 
Search for nearby places 
o Settings > 
Customize your app settings 


|. Before 
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Notice that you may get a messed up Ul in the editor once you multiply everything with the 
sizeMultiplier variable. This is because the width variable may return as 0 in the editor. 
Hence, by multiplying o by 480, you may get the result o, which makes the entire Ul to look 
funny. However, it will look fine when running the actual program. If you want to preview the 

Ul on the editor, temporarily set the sizeMultiplierto 1. 


Integrating QML and C++ 


Qt supports bridging between C++ classes with the QML engine. This combination allows 
developers to take advantage of both the simplicity of QML and the flexibility of C++. You can 
even integrate features that are not supported by Qt from an external library, then pass the 
resulting data to Qt Quick to be displayed in the UI. In this example, we will learn how to export 
our Ul components from QML to the C++ framework and manipulate their properties before 
displaying them on screen. 


How to do it... 


1. Once again, we will start everything from scratch. Therefore, create a new Qt Quick 
application project in Qt Creator and open up MainForm.ui.qml. 


2. We can keep the mouse area and text widget, but place the text widget at the bottom 
of the window. Change the Text property of the text widget to Change this text 
using C++ and set its font size to 18. After that, go to the Layout tab and enable 
both Vertical center anchor and Horizontal center anchor to ensure it's always 
somewhere in the middle of the window, regardless of how you rescale the window. 
Set the Margin for the Vertical center anchor to 120: 


Target 


Margin 
Target 


Margin 
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Next, drag a Rectangle widget from the Library window to the canvas and set its 
color to +£f0d0d. Set its Width and Height to 200 and enable both the vertical and 
horizontal center anchor. After that, set the Margin of the horizontal center anchor 
to -14. Your Ul should now look something like this: 


Navigator 
Rectangle 
mouseáÁrea 
T messageText 
rectanglel 


Change this text using C++ 


Once you are done with that, right-click on your project directory in Qt Creator and 
choose Add New. Then, a window will pop up and let you pick a file template. Select 
C++ Class and press Choose.... After that, it will ask you to define the C++ class by 
filling in the information for the class. In this case, insert MyClass in the Class Name 
field and select QObject as the Base class. Then, make sure Include QObject option 
is ticked and you can now click the Next button, follow by the Finish button. Two 
files—myclass.h and myclass. cop will now be created and added to your project: 


Projects 


v ¡Y e B: » 


Y Que r-- 
ñ Set "QML_Cpp" as Active Project 
Build 
vA Run qmake 
Deploy 
vw [ 
a Run 
Rebuild 
y 
== Clean 
Add Existing Files... 


Add Existing Directory... 
New Subproject.. 

Add Library... 

Find in This Directory... 
Close Project "OML_Cpp" 


Collapse All 
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5. Now, open Up myclass.h and add a variable and function below the class 
constructor, like so: 


Hifndef MYCLASS H 
Hdefine MYCLASS H 
Hinclude <Q0bject> 


class MyClass : public Q0bject 


( 


Q OBJECT 
public: 
explicit MyClass(00bject *parent = 0); 


// Object pointer 
Q0bject* myObject; 


// Must call Q INVOKABLE so that this function can be used in 
QML 
Q INVOKABLE void setMyObject (Q0bject* obj); 


signals: 


public slots: 


y; 
tendif // MYCLASS H 


6. Afterthat, open up myclass.cpp and define the setMyObject () function: 


Hinclude "myclass.h" 


MyClass: :MyClass (Q0bject *parent) : OObject (parent) 
( 
) 


void MyClass: :setMyObject (Q0bject* obj) 
( 

// Set the object pointer 

myObject = obj; 


) 
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We can now close myclass . cpp and open up main. qml. At the top of the file, add 
in the third line, which imports the custom library we just created in C++: 

import OtQuick 2.4 

import OtQuick.Window 2.2 

import MyClassLib 1.0 


Then, define MyClass in the Window object and call its function setMyObject () 
within the MainForm object, like so: 


Window ( 
visible: true 
width: 480 
height: 320 


MyClass 


( 
J 


id: myclass 


MainForm ( 
anchors.fill: parent 
mouseArea.onClicked: ( 
Ot .quit (); 
) 


Component .onCompleted: 
myclass.setMyO0bject (messageText) ; 


) 


Lastly, open Up main. cpp and register the custom class to the QML engine. We also 
change the properties of the text widget and the rectangle here using C++ code: 


Hinclude <QGuiApplication> 
Hinclude <Q0mlApplicationEngine> 
Hinclude <OtOml> 

Hinclude <OQuickView> 

Hinclude <OQuickItem> 

Hinclude <OQuickView> 

Htinclude "myclass.h" 
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int main(int argc, char *argvl]) 


( 


) 


// Register your class to QML 
qmlRegisterType<MyClass>("MyClassLib", 1, 0, "MyClass"); 


QGuiApplication applargc, argv); 


QO0mlApplicationEngine engine; 
engine.load(QUrl (QStringLiteral ("grc:/main.qml"))); 


QO0bject* root = engine.rootObjects () .value (0); 


QO0bject* messageText = 
root->findCchild<Q0bject*>("messageText"); 

messageText->setProperty("text", QVariant("C++ is now in 
control!")); 


messageText->setProperty("color", QVariant("green")); 


QO0bject* square = root->findChild<Q0bject*> ("square"); 
square->setProperty("color", QVariant ("blue")); 


return app.exec(); 


10. Build and run the program now, and you should see the colors of the rectangle and 


the text are completely different from what you defined earlier in Qt Quick. This ¡is 
because their properties have been changed by the C++ code: 


E) QML_Cpp 


C++ is now in control! 
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QML ¡is designed to be easily extensible through C++ code. The classes in the Qt QML module 
enable QML objects to be loaded and manipulated from C++. 


Only classes that are inherited from the QObject base class can be integrated with QML, as 
itis part of the Qt ecosystem. Once the class has been registered with the QML engine, we get 
the root item from the QML engine and use it to find the objects we want to manipulate. After 
that, use the setProperty () function to change any of the properties belong to the widget. 


Notice that the Q_ INVOKABLE macro is required in front of the function that you intend to call 
in QML. Without it, Qt will not expose the function to Qt Quick and you will not be able to call it. 
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In this chapter, we will cover the following recipes: 


» Processing XML data using stream reader 

» Writing XML data using stream writer 

» Processing XML data using the QDomDocument class 
» Writing XML data using the QDomDocument class 

» Using Google's Geocoding API 


Introduction 


XML is the file extension of a type of file format called Extensible Markup Language, which 
is used to store information in a structured format. The XML format is used extensively for 
the Web, as well as other applications. HTML, for instance, is the file format used for creating 
web pages and is based upon the XML format. Starting from Microsoft Office 2007, Microsoft 
Office uses the XML-based file formats, such as .docx, .x1sx, .pptx, and so on. 


Processing XML data using stream reader 


In this section, we will learn how to process data taken from an XML file and extract it using 
the stream reader. 


How to do it... 


Let's create a simple program that reads and processes XML files by following these steps: 


1. As usual, create a new Qt Widgets Application project at your desired location. 
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2. 


Next, open up any text editor and create an XML file that looks like the following, then 
save itas scene.xml: 


<?xml version="1.0" encoding="UTF-8"?> 
<scene> 
<object tag="building"> 
<name>Library</name> 
<position>120.0,0.0,50.68</position> 
<rotation>0.0,0.0,0.0</rotation> 
<scale>1.0,1.0,1.0</scale> 
</object> 
<object tag="building"> 
<name>Town Hall</name> 
<position>80.2,0.0,20.5</position> 
<rotation>0.0,0.0,0.0</rotation> 
<scale>1.0,1.0,1.0</scale> 
</object> 
<object tag="prop"> 
<name>Tree</name> 
<position>10.46,-0.2,80.2</position> 
<rotation>0.0,0.0,0.0</rotation> 
<scale>1.0,1.0,1.0</scale> 
</object> 
</scene> 


Next, go back to Qt Creator and open up mainwindow.h. Add the following headers 
atthe top of the script, right after tinclude <QOMainWindow>: 


Hinclude <OXmlStreamReader> 
Hinclude <QDebug> 

Hinclude <QFile> 

Hinclude <QFileDialog> 


Then, open Up mainwindow.ui and drag a Push Button from the widget box 
on the left-hand side to the Ul editor. Change the object name of the button to 
loadXmlButton and its display text to Load XMIL: 


Type Here 


” . " 
MN LoadXML " 
" - " 
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5. After that, right-click on the button and select Go to slot.... A window will pop up with 
a list of signals available for selection. 


6. Choose the default clicked () option and press the OK button. Qt 
will now insert a slot function in your header and source files called 
on_loadXmlButton clickea /(). 


7. Now, add the following code to the on_loadXmlButton_clicked () function: 


void MainWindow::on_loadXmlButton_clicked () 
1 
QXm1StreamReader xml; 


QString filename = QFileDialog::getOpenFileName (this, "Open Xml1", ".", "Xml files (*.xml)"); 
QFile file(filename); 
if ('file.open(QFile::ReadOnly | QFile::Text)) 
aDebug() << "Error loading XML file."; 
xml .setDevice (¿file); 


while(!xml.atEnd()) 
1 
if (xml.isStartElement ()) 
t 
QString name = xml.name () .toString(); 


if (name == "object") 
1 
aDebug() << " [Object] ================== 


for (int i = 0; i < xml.attributes().size(); i++) 
1 
aDebug() << xml.attributes().at(i).name() << xml.attributes().at(i).value():; 
7 
) 


if (name == "name" || name == "position" || name == "rotation" || name == "scale") 
1 


QString text = xml.readElementText ():; 
aDebug() << name << text; 


) 
if (xml.isEndElement ()) 
t 


QString name = xml.name () .toString(); 


if (name == "object") 
t 


) 
, 


xml.readNext (); 


if (xml.hasError ()) 


aDebug() << "Error loading XML:" << xml.errorString(); 
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8. Build and run the project now and you see a window popping up that looks like the 
one you made in Step 4: 


Load XML 


9. Click on the Load XML button and you should see the file selector window popping up 
on screen. Select the XML file you just created in Step 2 and press the Select button. 
After that, you should see the following debug text appear on the application output 
window in Qt Creator, which indicates the program has successfully loaded the data 
from the XML file you just selected: 


[Object ]================================= 
"tag" "building" 
“name” "Library" 
"position" "120.0,0 
“rotation” "0. .0 


“name” “Town Hall" 
"position" "80.2,0.0,20.5" 
"rotation” "0.0,0.0,0.0" 
1.0,1.0,1.0" 


"position" "10.46,-0.2,88.2" 
"rotation" "0.0,0.0,8.0" 
"scale" "1.0,1.0,1.0" 


What we're trying to do in this example is to extract and process data from an XML file using 
the QXm1StreamReader class. Imagine you're making a computer game and you're using 
XML files to store the attributes of all the objects in your game scene. In this case, the XML 
format plays an important role in storing the data in a structured way, which allows for 

easy extraction. 


To begin with, we need to add the header of the class related to XML to our source file, which 
in this case is the QXm1StreamReader class. QOXmlStreamReader is built into Qt's core 
library, so there is no need to include any additional modules with it, which also means that 
it's the recommended class to use for processing XML data in Qt. 
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Once we clicked on the Load XML button, the on_loadXmlButton_clicked () slot will be 
called; this is where we write the code for processing the XML data. 


First, we use a file dialog for selecting the XML file we want to process. Then, send the 
selected file's filename, together with its path, to the OFile class to open and read the 
text data of the XML file. After that, the file's data is sent to the QXm1StreamReader class 
for processing. 


We use a while-loop to read through the entire XML file and check every element processed by 
the stream reader. We determine whether the element is a start element or an end element. 
If it's a start element, we will then check the name of the element to determine whether the 
element should contain any data that we need. 


Then, we will extract the data, either in the form of an attribute or text. An element may have 
more than one attribute, which is why we must loop through all the attributes and extract 
them one by one. 


Besides the web browser, many commercial game engines and interactive applications also 
use the XML format to store information for in-game scenes, meshes, and other forms of 
asset used in their product. This is because the XML format provides many benefits over other 
file formats, such as a compact file size, high flexibility and extendibility, easy file recovery, and 
a relational tree structure that allows it to be used for highly efficient and performance-critical 
applications such as search engines, intelligent data mining servers, scientific simulations, 
and so on. 


Let's learn a little bit about the format of an XML file. We will use scene . xm1, which we used 
in the previous example and looks like this: 


<?xml version="1.0" encoding="UTF-8"?> 
<scene> 
<object tag="building"> 
<name>Library</name> 
<position>120.0,0.0,50.68</position> 
<rotation>0.0,0.0,0.0</rotation> 
<scale>1.0,1.0,1.0</scale> 
</object> 
<object tag="building"> 
<name>Town Hall</name> 
<position>80.2,0.0,20.5</position> 
<rotation>0.0,0.0,0.0</rotation> 
<scale>1.0,1.0,1.0</scale> 
</object> 
<object tag="prop"> 
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<name>Tree</name> 
<position>10.46,-0.2,80.2</position> 
<rotation>0.0,0.0,0.0</rotation> 
<scale>1.0,1.0,1.0</scale> 
</object> 
</scene> 


In XML, a tag is a line of markup text that starts with a < symbol and ends with a > symbol. For 
example, <scene> is a tag called scene, <object> ¡s a tag called object and so on. Tags 
come in three flavors: 


»  Starttag, for example <scene> 
»  Endtag, for example </scene> 


»  Empty-element tag, for example <scene /> 


Whenever you write a start tag, it must end with an end tag, otherwise your XML data will be 
invalid. An empty-element tag, however, is a standalone tag and does not need an end tag 
behind it. 


Atthe top of scene. xml, you will see a tag called xm1 which stores the version of the XML 
format and the encoding type, which in this case is XML version 1.0 and UTF-8 (8-bit Unicode) 
encoding. This line is called XML declaration and it must exist in any of your XML files to 
validate its format. 


After that, you will see tags that have attributes stored in them, for example 

<object tag="building">. This means that the object tag contains an attribute called 
tag, which contains a value, building. You can put as many attributes as you like in a tag, for 
example <object tag="building" color="red" name="LA Community Hospital" 
coordinate="34.0191757,-118.2567239">. Each of these attributes stores distinctive 
data that can be retrieved easily using Qt. 


Other than that, you can also store data between the start tag and the end tag, for example 
<name>Town Hall</name>. This method, however, is not relevant to the empty-element 
tag, since it is a standalone tag and isn't followed by a close tag. Therefore, you can only 
store attributes in an empty-element tag. 


E To learn more about the XML format, visit http: //www.w3schools. 
Js com/xml. 
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Writing XML data using Stream Writer 


Since we have learned how to process data obtained from an XML file in the previous recipe, 
we will move on to learning how to save data to an XML file. We will continue with the previous 
example and add to it. 


How to do it... 


We will learn how to save data into an XML file through the following steps: 


1. First, add another button to mainwindow.ui and set its object name as 
saveXmlButton and its label as Save XMIL: 


Type Here 


Load XML 


. ” " 
M SaveXML NM 
” - ” 


2. Next, right-click on the button and select Go to slot.... A window will pop up with a list 
of signals available for selection. Select the c1icked () option and click OK. A signal 
function called on_saveXmlButton clicked() will now be automatically added 
to both your mainwindow.h and mainwindow. cpp file by Qt: 


Select signal 


clicked() OAbstractButton A 
clicked(boo!l) OAbstractButton 
pressed() OAbstractButton 


released() OAbstractButton 
toggled(bool) QAbstractButton 
destrovedí) OOhiect 


3. Afterthat, add the following code to the on_saveXmlButton_clicked () function: 


OXmlStreamWriter xml; 


OString filename = OFileDialog: :getSaveFileName (this, "Save 
Xml", ".", "Xml files (*.xm1)"); 

OFile file(filename); 

if (!file.open(QFile::WriteO0nly | QFile::Text)) 
gDebug() << "Error saving XML file."; 
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xml.setDevice (8file); 


xml .setAutoFormatting(true); 
xml .writeStartDocument (); 


xml .writeStartElement ("contact"); 


xml .writeAttribute("category", "Friend"); 
xml .writeTextElement ("name", "John Doe"); 
xml .writeTextElement ("age", "32"); 


xml .writeTextElement ("address", "114B, 2nd Floor, Sterling 
Apartment, Morrison Town"); 


xml .writeTextElement ("phone", "0221743566"); 
xml .writeEndElement (); 


xml .writeStartElement ("contact"); 


xml .writeAttribute("category", "Family"); 

xml .writeTextElement ("name", "Jane Smith"); 

xml .writeTextElement ("age", "24"); 

xml.writeTextElement ("address", "13, Ave Park, Alexandria"); 
xml .writeTextElement ("phone", "0025728396"); 


xml .writeEndElement (); 


xml .writeEndDocument (); 


4. Build and run the program and you should see an additional button on the 
program UI: 


5. Click on the Save XMIL button and a save file dialog will appear on the screen. Type 
the filename you desire and click the Save button. 
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6. Open up the XML file you just saved with any text editor. The content of the file should 
look like this: 


<?xml version="1.0" encoding="UTF-8"?> 
<contact category="Friend"> 
<name>John Doe</name> 
<age>32</age> 
<address>114B, 2nd Floor, Sterling Apartment, Morrison 
Town</address> 
<phone>0221743566</phone> 
</contact> 
<contact category="Family"> 
<name>Jane Smith</name> 
<age>24</age> 
<address>13, Ave Park, Alexandria</address> 
<phone>0025728396</phone> 
</contact> 


The saving process is more or less similar to loading an XML file in the previous example. The 
only difference is instead of using the QXm1 StreamReader class, we switched to using the 
QXmlStreamWriter class instead. 


We are still using the file dialog and the QFi1le class to save the XML file. This time, we have 
to change the open mode from QFile: :ReadOnly to OFile: :WriteOnly before passing 
the QFile class to the stream writer. 


Before we start writing any data to the new XML file, we must set auto formatting to true, 
otherwise there will be no spacing; it also adds new lines and indentation to the XML file 

to make it look tidy and easier to read. However, if that is your intention (making it harder 

to read and edit by the user), then you can just ignore the setAutoFormatting () function. 


Next, start writing the XML file by calling writeStartDocument (), followed by all the 
elements you want to save to the file, and at the end we call the writeEndDocument () 
function to stop writing. 


Each element must have a start and end tag in order for the reading process to work properly. 
The attributes of an element will be stored in the start tag, while the text data will be stored 
between the start and end tags. 


If we're writing an element that contains a group of child elements, then we must call 
writeStartElement () before writing the child elements. Then, call writeEndElement () 
after saving all its child elements to close the group with an end tag. The 
writetextElement () function, however, will automatically add the end tag for 

you so you don't have to worry about that one. 
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You can call the writeAttribute () function to add an attribute to an element. There is no 
limit on how many attributes you can add to a particular element. 


Processing XML data using the 


QDomDocument class 


Qt allows multiple ways to parse XML data, including the common method that we have 
covered in the previous examples. This time around, we're going to learn how to read data 
from an XML file using another class, called ODomDocument. 


How to do it... 


Processing XML data using the ODomDocument class is really simple: 


1. First of all, we need to add the XML module to our project by opening the project 
(.pro) file and add the text xm1 at the back of core and gui, like so: 


QT += core gui xml 


2. Then, just like what we did in the first example in this chapter, create a user interface 
that carries a button that says Load XML: 


Type Here 


" ” n 
M LoadXML NM 
n n n 


3. After that, right-click on the button, choose Go to slot..., and select the clickea () 
option. Press the OK button and Qt will add a slot function to your source code. 


4. Goto mainwindow.h and add the following headers so that we can make use of 
these classes: 


Hinclude 
Hinclude 
Hinclude 
Hinclude 


<QDomDocument > 
<QDebug> 
<QFile> 
<QFileDialog> 
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5. Next, go to mainwindow.cpp and insert the following code to the button's 


clicked () slot function: 


void MainWindow: : on_loadXmiButton_clicked 10) 
t 
QDomDocument xml; 


QString filename = QFileDialog::getOpenFileName (this, "Open Xm1"”, ".", "Xml files (*.xml)"); 


QFile file(filename); 

if (!'file.open(QFile::ReadOnly | QFile::Text)) 
aDebug() << "Error loading XML file."; 

if ('xml.setContent (4¿file)) 

1 
aDebug() << "Error setting content."; 
file.close(); 
return; 

) 

file.close([():; 


QDomElement element = xml.documentElement (); 
QDomNode node = element.firstChild(): 


while (!node.isNull ()) 
á QDomElement nodeElement = node.toElement (); 
if('nodeElement.isNull()) 
j if (nodeElement.tagName () == "object") 
i aDebug() << " [Object ] ================================="" ; 


QDomNode childNode = nodeElement.firstChild():; 
wnile (!childNode.isNull ()) 
t 
QDomElement childNodeElement = childNode.toElement (); 


QString name = childNodeElement.tagName (); 


if (name == "name" || name == "position" || name == "rotation"” 


1 
QString text = childNodeElement.text (); 
aDebug () << name << text; 

) 


childNode = childNode.nextSibling(); 


) 


A e A 
, 


node = node.nextSibling():; 


|| name == "scale") 
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6. Compile and run the program now. Click on the Load XML button and select the XML 
file used in the first example. You should see the following output: 


[Object] ================================= 
"tag" "building" 
"name" "Library" 


"scale" "1.0,1.0,1.0" 


"tag" "building" 

"name" "Town Hall" 
"position" "30.2,0.0,20.5" 
"rotation” "0.0,0.0,0.0" 
“scale” "1.0,1.0,1.0" 


"tag" "prop" 

"name" "Tree" 

"position" "18.46,-0.2,80.2" 
"rotation” "0.0,0.0,0.0" 
"scale" "1.0,1.0,1.0" 


Compared to QXm1StreamReader, the ODomDocument class ¡is less straightforward when 
comes to loading or saving XML data. However, ODomDocument does it in a strict way by 
making sure each element is linked to ¡ts respective parent element recursively, like in a tree 
structure. Unlike OXm1StreamReader, ODomDocument allows us to save data to an element 
created earlier, in a later timeframe. 


Since ODomDocument is not part of the Qt core library, we must add the XML module to our 
project manually. Otherwise, we will not be able to access ODomDocument and other classes 
related to it. 


First, we load the XML file and extract its content to the QODomDocument class. Then, we get 
its document element, which acts as the root document, and obtain its direct children. We 
then convert each of the child nodes to 0ODomElement and obtain their tag names. 


By checking tag names, we are able to determine the type of data we're expecting from each 
element. Since this is the first layer of elements with the tag name object, we don't expect 
any data from them; we repeat Step 3 again but this time around, we're going to do it on 

the element with the tag name object and obtain all its direct children, which means the 
grandchildren of the document element. 
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Again, by checking the tag name, we're able to know what data we're expecting from 
its children elements. If the tag name matches the ones we're expecting (in this 
case, name, position, rotation, scale) then we can obtain its data by calling 
OQDomElement : :text (). 


Writing XML data using the ADomDocument 


class 


In this example, we will learn how to write data to an XML file using the ODomDocument class. 
We will continue from the previous example and just add stuff to it. 


How to do it... 


To learn how to save data into an XML file using the ODomDocument class, let's do the 
following; 


1. Firstof all, add the second button to the Ul, called Save XML: 


Type Here 


Load XML 


” 
NM SaveXML NM 
n n n 


2. Right-click on the Save XML button and select Go to slot.... Then, pick the clicked() 
option and click OK. A new clicked () slot function will now be added to your 
source files. 
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3. Afterthat, write the following code within the button's c1icked () slot function: 


1 


void MainWindow::on _saveXmlButton_clicked() 


QString filename = QFileDialog::getSaveFileName (this, "Save Xml1", ".", "Xml files (*.xml)"); 
QFile file(filename); 
if ('file.open(QFile::WriteOnly | QFile::Text)) 


1 
aDebug() << "Error saving XML file."; 
file.close(); 
return; 

y 


QDomDocument xml ("contact"); 


// John Doe 

QDomElement root = xml.createElement ("contact"); 
root.setAttribute ("category", "Family"); 
xml.appendChild (root); 


QDomElement tagName = xml.createElement ("name"); 
root.appendChild (tagName) ; 

QDomText textName = xml.createTextNode ("John Doe"); 
tagName . appendChild (textName) ; 


QDomElement tagAge = xml.createElement ("age"); 
root.appendChild (tagAge) ; 

QDomText textAge = xml.createTextNode ("32"); 
tagAge.appendChild (textAge); 


QDomElement tagAddress = xml.createElement ("address"); 

root.appendChild (tagAddress); 

QDomText textAddress = xml.createTextNode ("114B, 2nd Floor, Sterling Apartment, Morrisontown"); 
tagAddress.appendChild (textAddress):; 


QDomElement tagPhone = xml.createElement ("phone"); 
root.appendChild (tagPhone) ; 

QDomText textPhone = xml.createTextNode ("0221743566"); 
tagPhone.appendChild (textPhone) ; 


// Jane Smith 

QDomElement root2 = xml.createElement ("contact"); 
root2.setAttribute ("category", "Friend"); 
xml.appendChild (root2); 


QDomElement tagName2 = xml.createElement ("name"); 
root2.appendChild (tagName2); 

QDomText textName2 = xml.createTextNode ("John Doe"); 
tagName2 . appendChild (textName2); 


QDomElement tagAge2 = xml.createElement ("age"); 
root2.appendChild (tagAge2); 

QDomText textAge2 = xml.createTextNode ("24"); 
tagAge2.appendChild (textAge2):; 


QDomElement tagAddress2 = xml.createElement ("address"); 

root2 .appendChild (tagAddress2); 

QDomText textAddress2 = xml.createTextNode("13, Ave Park, Alexandria"); 
tagAddress2.appendChild (textAddress2); 


QDomElement tagPhone2 = xml.createElement ("phone"); 
root2 .appendChild (tagPhone2); 

QDomText textPhone2 = xml.createTextNode ("0025728396"); 
tagPhone2 .appendChild (textPhone2); 


// Save to file 
QTextStream output (¿file); 
output << xml.toString(); 


file.close():; 
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4. Compile and run the program now and click on the Save XML button. Enter your 
desired filename in the save file dialog and click Save. 


5. Open up the XML file you just saved in Step 4 with any text editor and you should see 
something like this: 


<!DOCTYPE contact> 
<contact category="Family"> 
<name>John Doe</name> 
<age>32</age> 
<address>114B, 2nd Floor, Sterling Apartment, 
Morrisontown</address> 
<phone>0221743566</phone> 
</contact> 
<contact category="Friend"> 
<name>John Doe</name> 
<age>32</age> 
<address>114B, 2nd Floor, Sterling Apartment, 
Morrisontown</address> 
<phone>0221743566</phone> 
</contact> 


Similar to the previous example, we first initiate the file dialog and declare a 0DomDocument 
object. 


Then, we create the root element by calling 0ODomDocument : : createElement (). Any 
element created from the ODomDocument will NOT automatically become its direct child 
unless we append the newly created element as its child. 


To create the grandchildren of 9ODomDocument, simply append the newly created elements 
to the root element instead. By utilizing the append () function, we can easily arrange the 
XML data in a tree structure without wrapping our head around it. This, in my opinion, is the 
advantage of using ODomDocument instead of QXm1StreamReader. 


We can then add attributes to an element by calling ODomElement : : setAttribute (). We 
can also create a text node by calling ODomDocument : : createTextNode () and appending 
it to any of the elements in the XML structure. 


After we are done structuringthe XML data, we can then output all the data in the form of text 
to the OTextStream class and allow it to save the data into a file. 
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Using Google's Geocoding APl 


In this example, we will learn how to obtain the full address of a specific location by using 
Google's Geocoding API. 


How to do it... 


Let's create a program that utilizes the Geocoding API by following these steps: 


1. First, create a new Qt Widgets Application project. 


2. Next, open Up mainwindow.ui and add a couple of text labels, input fields, and 
a button to make your Ul to look similar to this: 


" " " 
Type Here 
Longitude: 
" " 
Latitude: 
Get Address 
" . " 


3. After that, open up your project (. pro) file and add the network module to your 
project. You can do that by simply adding the network text after core and gui, 
like so: 


QT += core gui network 


4. Then, open Up mainwindow.h and add the following headers to the source code, 
right after the line +include <QMainWindow>: 
Hinclude <QDebug> 
tinclude <QtNetwork/QNetworkAccessManager> 
Hinclude <QtNetwork/QNetworkReply> 
Hinclude <OXmlStreamReader> 


5. Next, declare a slot function manually and call it getAddressFinished (): 
private slots: 
void getAddressFinished(QNetworkReply* reply); 


6. Right after that, declare a private variable called addressRequest: 


private: 
QONetworkAccessManager* addressRequest; 
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7. Once you are done with that, open Up mainwindow.ui again, right-click on the 
Get Address button, and select Go to slot.... Then choose the clicked() option 
and press OK. A slot function will now be added to both the mainwindow.h and 
mainwindow.cpp source files. 


8. Now, open Up mainwindow.cpp and add the following code to the class constructor: 


MainWindow: :MainWindow(QOWidget *parent) 
OMainWindow (parent), 
ui (new Ui: :MainWindow) 


ui->setupui (this); 


addressRequest = new QNetworkAccessManager () ; 


connect (addressRequest, SIGNAL (finished (QNetworkReply*)), 
SLOT (getAddressFinished (QNetworkReply*))); 


) 


9. Then, we will add the following code to the getAddressFinished () slot function 
we declared manually just now: 


void MainWindow: :getAddressFinished (QNetworkReply* reply) 


( 


OByteArray bytes = reply->readAll (); 


//qDebug() << QOString: :fromUtf8 (bytes.data(), 
bytes.size()); 


QXmlStreamReader xml; 
xml.addData (bytes); 


while(!xml.atEnd()) 


( 


1f (xml.isStartElement ()) 

( 
OString name = xml.name() .toString(); 
//aDebug() << name; 


if (name == "formatted address") 

( 
QOString text = xml.readElementText (); 
aDebug() << "Address: " << text; 


return; 
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xml .readNext (); 


if (xml.hasError()) 


( 


aDebug() << "Error loading XML: " << 
xml .errorStringl(); 


return; 


aDebug() << "No result."; 


) 
10. Finally, add the following code to the c1icked () slot function created by Qt: 


void MainWindow: :on getAddressButton_clicked () 
( 
OString latitude = ui->latitude->text (); 
OString longitude = ui->longitude->text (); 


QNetworkRequest request; 

request .setUrl (QUrl ("http://maps.googleapis.com/ 
maps/api/geocode/xml?latlng=" + latitude + " 
¿" + longitude + "Ssensor=false")); 


addressRequest->get (request); 


) 


11. Build and run the program now and you should be able to obtain the address by 
inserting the longitude and latitude values and clicking the Get Address button: 


Longitude: -73.9780838 


Latitude: 40.6712957 


Get Address 


12. Let's try with longitude -73.9780838 and latitude 40.6712957. Click the Get 
Address button and you will see the following result in the application output window: 


Address: "180-190 7th Ave, Brooklyn, NY 11215, USA" 
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I won't be able to tell you exactly how Google obtains the address from its backend system, 
but | can teach you how to request the data from Google by using ONetworkRequest. 
Basically, all you need to do is to set the URL of the network request to the URL | used in the 
previous source code and append both the latitude and longitude information to the URL. 
After that, all we can do is wait for the response from the Google API server. 


Do notice that we need to specify XML as the desired format when sending the request to 
Google; otherwise, it may return the results in JSON format instead. This can be done by 
adding the xm1 keyword within the network request URL, as highlighted here: 


request .setUrl (QUrl ("http://maps.googleapis.com/maps/ 
api/geocode/xml?latlng=" + latitude + "," + longitude + 
"ssensor=false")); 


When the program the received the response from Google, the getAddressFinished () 
slot function will be called and we will be able to obtain the data sent by Google through 
QNetworkReply. 


Google usually replies with a long text in XML format, which contains a ton of data we don't 
need. We used QXml1StreamReader to parse the data because in this case we don't have 
to care about the parent-child relationship of the XML structure. 


All we need is the text stored in the formatted_address element in the XML data. Since 
there is more than one element by the name of formatted_address, we just need to find 
the first one and ignore the rest. 


You can also do the reverse by providing an address to Google and obtain the location's 
coordinate from its network response. 


Google's Geocoding API is part of the Google Maps APls Web Services, which provides 
geographical data for your map applications. Besides the Geocoding API, you can also use 
their Location API, Geolocation API, Time Zone API, and so on to achieve your desired results. 


For more information regarding the Google Maps APIs Web Services, visit this 
Es link: https: //developers.google.com/maps/web-services 
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In this chapter, we will cover the following recipes: 


» Data conversion 
» Image conversion 
» Video conversion 


» Currency conversion 


Introduction 


Data kept within our computer environment is encoded in a variety of ways. Sometimes it can 
be used directly for a certain purpose, other times it needs to be converted to another format 
in order to fit the context of the task. The process of converting the data from one format to 
another also varies, depending on the source format as well as the target format. Sometimes 
the process can be very complex, especially when dealing with data that is feature-rich 

and sensitive, such as image or video conversion. Even a small error during the conversion 
process may render the file unusable. 


Data conversion 


Qt provides a set of classes and functions for easily converting between different types 

of data. This makes Qt more than just a GUI library; it is a complete platform for software 
development. The OVariant class, which we will be using in the following example, makes 
Qt even more flexible and powerful compared to similar conversion functionalities provided 
by the C++ standard library. 
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How to do it... 


Let's learn how to convert various data types in Qt by following these steps: 


1. Open up Qt Creator and create a new Qt Console Application project by going to File 
| New File or Project: 


[oy New File or Project 


Choose a template: 


All Templates 9. 


Projects 

| Application 
Library 
Other Project 
Non-0t Project 
Import Project 

Files and Classes 

C++ 
Ot 
GLSL 
General 


Java 


Python 


a CK Widget Applicalic Creates a project containing a single main.cpp file 
| Qt Console Application with a stub implementation. 
| Ot Quick Application pr a desktop Qt for building the application if 
av . 
<Í Ot Quick Controls Application 


Supported Platforms: Android Desktop 
y Ot Canvas 3D Application 


2. Next, open Up main. cpp and add the following headers to it: 


Hinclude 
Hinclude 
Hinclude 
Hinclude 
Hinclude 
Hinclude 


<QCoreApplication> 
<QDebug> 

<QtMath> 
<QDateTime> 
<QTextCodec> 
<iostream> 


3. Then, in the main () function, add the following code to convert a string to a number: 


int numberA = 2; 
OString numberB = "5"; 


aDebug () 


<< "1) "<< "2 + 5 =" << numberA + numberB.tolnt (); 
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4. After that, we'll convert a number back to a string; 
float numberC = 10.25; 
float numberD = 2; 
QOString result = QOString: :number (numberC * numberD)'; 
aDebug() << "2) "<< "10.25 * 2 =" << result; 


5. We also learn how to round down a value by using qFloor (): 


float numberE 
float numberF 
aqDebug() << "3) " << "Floor of 10.3 is" << numberF; 


10.3; 
aFloor (numberE) ; 


6. Then, by using qCeil (), we are able to round a number to the smallest integral 
value not smaller than its initial value: 


float numberG 10.3; 
float numberH = qCeil (numberG) ; 
gDebug() << "4) " << "Ceil of 10.3 is" << numberH; 


7. Afterthat, we will create a date time variable by converting from a string; 


OString dateTimeAString = "2016-05-04 12:24:00"; 


ODateTime dateTimeA = 
QDateTime::fromString(dateTimeAString, "yyyy-MM-dd hh:mm:ss"); 


gDebug() << "5) " << dateTimea; 


8. Subsequently, we can also convert the date time variable back to a string with our 
own custom format: 


QDateTime dateTimeB = QDateTime: :currentDateTime (); 
QString dateTimeBString = dateTimeB.toString("dd/MM/yy hh:mm"); 
agDebug() << "6) " << dateTimeBString; 


9. We can call the OString: : toUpper () function to convert a string variable to all 
capital letters: 


QOString hello1l = "hello world!"; 
aDebug() << "7) " << hello1l.toUpper (); 


10. On the other hand, calling OString: :toLower () will convert the string to all 


lowercase: 
QOString hello2 = "HELLO WORLD!"; 
aDebug() << "8) " << hello2.toLower (); 


11. The OVariant class provided by Qt is a very powerful data type that can be easily 
converted to other types without any effort by the programmer: 


QOVariant aNumber = OVariant (3.14159); 
double aResult = 12.5 * aNumber.toDouble(); 
aDebug() << "9) 12.5 * 3.14159 =" << aResult; 
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12. This demonstrates how a single OVariant variable can be simultaneously converted 
to multiple data types without any effort by the programmer: 


aDebug <s “TO) Ms 

QVariant myData = OVariant (10); 
aDebug << myData; 
myData = myData.toFloat () / 2.135; 
aDebug << myData; 
myData = true; 

Debug << myData; 


3 10 


yData = QDateTime: :currentDateTime(); 
Debug << myData; 

yData = "Good bye!"; 

Debug << myData; 


3 a 


1Q 


The full source code in main. cpp will now look like this: 


tinclude <QCoreApplication> 
tinclude <QDebug> 

tinclude <QtMath> 

tinclude <QDateTime> 
tinclude <QTextCodec> 
tinclude <iostream> 


int main(int argc, char *argv[]) 
t 
QCoreApplication a(argc, argv); 


// String to number 

int numberA = 2; 

QString numberB = "5"; 

aDebug() << "1) " << "2 + 5 =" << numberA + numberB.tolnt (); 


// Number to string 

float numberC = 10.25; 

float numberD = 2; 

QString result = QString: :number (numberC * numberD); 
aDebug() << "2) "<< "10.25 * 2 =" << result; 


// Floor 

float numberE = 10.3; 

float numberF = qFloor (numberE); 

aDebug() << "3) " << "Floor of 10.3 is” << numberF; 


// Ceil 

float numberG = 10.3; 

float numberH = aCeil (numberG) ; 

aDebug() << "4) " << "Ceil of 10.3 is" << numberH; 


// Date time from string 

QString dateTimeAString = "2016-05-04 12:24:00"; 

QDateTime dateTimeA = QDateTime::fromString(dateTimeAString, "yyyy-MM-dd hh:mm:ss"); 
aDebug() << "5) " << dateTimeA; 
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// Date time to string 

QDateTime dateTimeB = QDateTime::currentDateTime (); 

QString dateTimeBString = dateTimeB.toString("dd/MM/yy hh:mm"); 
aDebug() << "6) " << dateTimeBString; 


String to all uppercase 
ig hellol = "hello world!"; 
aDebug() << "7) " << hello1.toUpper (); 


// String to all lowercase 
QqSt ig hello2 = "HELLO WORLD!"; 


aDebug() << "82) " << hello2.toLower (); 


QVariant to double 

iant aNumber = QVariant(3.14159); 

( ble aResult = 12.5 * aNumber.toDouble (); 
aDebug() << "9) 12.5 * 3.14159 =" << aResult; 


// QVariant different types 
aDebug() << "10) "; 

QVariant myData = QVariant (10); 
aDebug() << myData; 

myData = myData.toFloat() / 2.135; 
aDebug() << myData; 

myData = true; 

aDebug() << myData; 

myData = QDateTime::currentDateTime (); 
aDebug () << myData; 

myData = "Good bye!"; 

aDebug () << myData; 


return a.exec(); 


13. Compile and run the project now and you should see something like this: 


A CAOQt Tools¡QtCreatoribinigtcreator_process_stub.exe =- O X 
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All the data types provided by Qt, such as OString, ODateTime, OVariant, and so on, 
contain functions that make conversion to other types easy and straightforward. 


Qt also provides its own object conversion function, gobject_cast (), which doesn't rely on 
the standard library. It is also more compatible with Qt and works well for converting between 
Qt's widget types and data types. 


Qt also provides you with the OtMath class, which helps you to manipulate number variables, 
such as rounding up a floating point number or converting an angle from degrees to radians. 


OVariant is a special class that can be used to store data of all kinds of type. It can 
automatically determine the data type by examining the value stored in the variable. You 
can also easily convert the data to any of the types supported by the OVariant class 

by just calling a single function, such as toFloat (), toInt (), toBool (), toChar (), 
toString(),and so on. 


Be aware that each of these conversions takes computing power to make it happen. Even 
though modern computers are extremely fast at handling operations such as these, you 
should be careful not to overdo it with a large quantity at the same time. If you're converting a 
large set of variables for complex calculations, it might slow down your computer significantly, 
so therefore try to convert variables only whenever it's deemed necessary. 


Image conversion 


In this section, we will learn how to build a simple image converter that converts an image 
from one format to another. Qt supports reading and writing different types of image formats, 
and this support comes in the form of external DLL files due to licensing issues. However, you 
don't have to worry about that because as long as you include those DLL files in your project, 
it will work seamlessly across different formats. There are certain formats that only support 
reading and not writing, and some that support both. You can check out the full details at 
http://doc.qt.io/qt-5/qgtimageformats-index.html. 


How to do it... 


Qt's built-in image libraries make image conversion really simple: 


1. First of all, open up Qt Creator and create a new Qt Widgets Application project. 


2. Open Up mainwindow.ui and add a line edit and push button to the canvas for 
selecting image files, a combo box for selecting the desired file format, and another 
push button for starting the conversion process: 
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n " " 
Browse 
"on +]4 
Convert 
” " " 


3. Next, double-click the combo box and a window will appear for editing the combo box. 
We will add three items to the combo box list by clicking the + button three times and 
renaming the items PNG, JPEG, and BMP: 


[”- Edit Combobox Xx 


PNG 
JPEG 
BMP 


| ¡= o ¡9 Properties << 


ca 


4. Afterthat, right-click on one of the push buttons and select Go to slot..., then click 
the OK button. A slot function will then be automatically added to your source files. 
Then, repeat this step for the other push button as well: 


[7 Goto slot 
Select signal 
«clicked() QAbstractButton A 
clicked(bool) QAbstractButton 
pressed() OAbstractButton 
released() OAbstractButton 
toggled(boo!) QAbstractButton 
destroved() OObhiect Y 
pa 


5. Once you are done with the Ul, let's move over to the source code. Open up 
mainwindow.h and add in the following header: 


Hinclude <QOMainWindow> 
Hinclude <QFileDialog> 
Hinclude <QMessageBox> 
Hinclude <QDebug> 
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6. Then, open Up mainwindow.cpp and define what will happen when the Browse 
button is clicked, which in this case is opening the file dialog to select an image file: 


void MainWindow: :on browseButton_ clicked () 


( 


OString fileName = OFileDialog: :getOpenFileName (this, 
"Open Image", "", "Image Files (*.png *.Jpg *.bmp)"); 
ui->filePath->setText (fileName) ; 


) 


7. Finally, we also define what will happen when the Convert button is clicked: 


void MainWindow: :on _convertButton_clicked() 
1 
String fileName = ui->filePath->text (); 


ne] 


if (fileName != "") 
1 
QFilelnfo filelnfo = QFile(fileName):; 
QString newFileName = filelnfo.path() + "/" + fileInfo.completeBaseName (); 


Qlmage image = Qlmage (ui->filePath->text ()); 


if (!'image.isNull()) 
t 


// 0 - PNG 

// 1 - JPG 

// 2 —- BMP 

int format = ui->fileFormat->currentindex(); 
if (format == 0) 


1 

newFileName += ".png"; 
) 
else if (format == 1) 
1 

newFileName += ".jpg"; 
y 
else if (format == 2) 
1 

newFileName += ".bmp"; 
) 


aDebug () << newFileName << format; 
if (image.save(newFileName, 0, -1)) 
1 
QMessageBox::information(this, "Success", "Image successfully converted."); 


else 
1 
QMessageBox::warning(this, "Failed", "Failed to convert image."); 
) 
y 
else 
1 
QMessageBox: :warning(this, "Failed", "Failed to open image file."); 
y 
3 
else 
1 
QMessageBox::warning(this, "Failed", "No file is selected."); 
+ 
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8. Build and run the program now and we should get a pretty simple image converter 
that looks like this: 


E] MainWindow el O Xx 
[IO NA 
PNG 20 
Convert 


The previous example uses the native QImage class from Qt, which contains functions that 
can access pixel data and manipulate it. It is also used to load an image file and extract its 
data through different decompression methods, depending on the format of the image. Once 
the data is extracted, you can then do anything you want with it, such as displaying the image 
on screen, manipulating its color information, resizing the image, or compressing it with 
another format and saving it as a file. 


We used OFilelInfo to separate the filename from the extension so that we can amend 
the extension name with the new format selected by the user from the combo box. This 
way we can save the newly converted image in the same folder as the original image and 
automatically give it the same file name as well, except in a different format. 


As long as you're trying to convert the image to a format supported by Qt, all you need to do 

is to call OlImage: : save (). Internally, Qt will figure out the rest for you and output the image 
to the chosen format. In the QImage: : save () function, there is a parameter that sets the 
image quality and another for setting the format. In this example, we just set both as the 
default values, which saves the image at the highest quality and lets Qt figure out the format 
by checking the extension stated in the output file name. 


Here are some tips. You can also convert an image to PDF by using the QPdfWriter class 
provided by Qt. Essentially, what you do is paint the selected image to the layout of a newly 
created PDF document and set its resolution accordingly. For more information about the 
OPdf Writer class, visit http: //doc.at.io/qt-5/qpdfwriter.html. 
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Video conversion 


In this recipe, we will create a simple video converter using Qt and FFmpeg, a leading 
multimedia framework that is free and open source. Although Qt does support playing video 
files through its widget, it does not support video conversion at the moment. Fear not! You 
can actually still achieve the same goal by making your program cooperate with another 
standalone program through the OProcess class provided by Qt. 


How to do it... 


Let's make a simple video converter with the following steps: 


1. Download FFmpeg (static package) from http: //ffmpeg.zeranoe.com/builds 
and extract the contents to C: /FFmpeg/. 


2. Then, open up Qt Creator and create a new Qt Widgets Application project by going 
to File | New File or Project.... 


3. After that, open Up mainwindow.ui and we're going to work on the program's user 
interface. Its Ul is very similar to the previous example, except we add an extra text 
edit widget to the canvas, just below the combo box: 


. - . 
Browse 
AVI Pé 
0] 1] 
Convert 
" - - 
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4. Double-click the combo box and a window will appear to edit the combo box. We 
will add three items to the combo box list by clicking the + button three times, and 
rename the items AVI, MP4, and MOV: 


[7 Edit Combobox Xx 
AVI 


MP4 
MOV 


| o 9 Properties << 


pc 


5. After that, right-click on one of the push buttons and select Go to slot..., then click 
the OK button. A slot function will then be automatically added to your source files. 
Then, repeat this step for the other push button as well. 


6. After that, open Up mainwindow.h and add the following headers to the top: 


Hinclude <OMainWindow> 
Hinclude <QFileDialog> 
Hinclude <QProcess> 
Hinclude <QMessageBox> 
Hinclude <QScrollBar> 
Hinclude <QDebug> 


7. Then, add the following pointers under the public keyword: 
public: 
explicit MainWindow(QWidget *parent = 0); 
-MainWindow () ; 


QProcess* process; 
QString outputText; 
QString fileName; 
QString outputFileName; 
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8. Besides that, we also need to add three extra slot functions under the two functions 
that Qt created for us previously: 


private slots: 
void on browseButton _clicked(); 
void on convertButton clicked(); 


void processStarted(); 
void readyReadStandardOutput (); 
void processFinishedl(); 


9. Next, open Up mainwindow.cpp and add the following code to the class constructor: 


MainWindow: :MainWindow(QWidget *parent) 
OMainWindow (parent), ui(new Uli: :MainWindow) 


ui->setupui (this); 


process = new QProcess (this); 
connect (process, SIGNAL (started()), this, 
SLOT (processStarted())); 


connect (process, SIGNAL (readyReadStandardOutput ()), 
this,SLOT(readyReadStandardOutput ())); 


connect (process, SIGNAL(finished(int)), this, 
SLOT (processFinished())); 
) 


10. After that, we define what will happen when the Browse button is clicked, which in 
this case will open up the file dialog to choose the video file: 


void MainWindow::on browseButton _clicked() 
OString fileName = OFileDialog: :getOpenFileName (this, 
"Open Video", "", "Video Files (*.avi *.mp4 *.mov)"); 
ul->filePath->setText (fileName); 
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11. Then, we also define what will happen if the Convert button is clicked. What we 
are doing here is passing the filenames and arguments to FFmpeg and then the 
conversion process will be handled externally by FFmpeg: 


void MainWindow::on convertButton_clicked() 
1 
QString ffmpeg = "C:/FFmpeg/bin/ffmpeg"; 
QStringList arguments; 


fileName = ui->filePath->text (); 
if (fileName != "") 
1 
QFilelnfo filelnfo = QFile(fileName)*; 
outputFileName = filelnfo.path() + "/" + fileInfo.completeBaseÑame (); 


if (QFile::exists(fileName)) 
1 


// 0 - AVI 

1/ 1 — MP4 

11 2 - MOV 

int format = ui->fileFormat->currentindex ():; 
if (format == 0) 


1 

outputFileName += ".avi"; 
) 
else if (format == 1) 
1 

outputFileName += ".mp4"; 
) 
else if (format == 2) 
1 

outputFileName += ".mov"; 
) 


aDebug() << outputFileName << format; 
arguments << "-i" << fileName << outputFileName; 
aDebug () << arguments; 


process->setProcessChannelMode (QProcess: :MergedChannels); 
process->start (ffmpeg, arguments); 


) 
else 
1 


QMessageBox: :warning(this, "Failed", "Failed to open video file."); 
) 
) 
else 
1 
QMessageBox: :warning (this, "Failed", "No file is selected."); 
y 


12. Once we are done with that, we will then tell our program what to do when the 
conversion process has started: 


void MainWindow: :processStarted() 


( 


gDebug() << "Process started."; 


ul->browseButton->setEnabled (false); 
ui->fileFormat->setEditable (false); 
ui->convertButton->setEnabled (false); 
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13. Next, we will write the slot function that gets called during the conversion process 
whenever FFmpeg returns an output to the program: 


void MainWindow: : readyReadStandardOutput () 


( 


outputText += process->readAl1lStandardOutput (); 
ui->outputDisplay->setText (outputText); 


ui->outputDisplay->verticalScrollBar () ->setSliderPosition 
(ui->outputDisplay->verticalScrollBar () ->maximum()); 


) 


14. Lastly, we define the slot function that gets called when the entire conversion process 
has been completed: 


void MainWindow::processFinished () 


( 


gDebug() << "Process finished."; 


if (QFile::exists(outputFileName)) 
OMessageBox::information(this, "Success", 
"Video successfully converted."); 


) 


else 


( 


OMessageBox::information(this, "Failed", 
"Failed to convert video."); 


ul->browseButton->setEnabled (true) ; 
ul->fileFormat->setEditable (true); 
ul->convertButton->setEnabled (true); 
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15. Build and run the project now and you should get a simple yet workable video 
converter: 


E) MainWindow = [m1 Xx 


C:JUsers/leezhieng/Desktop /bigbuckbunny.mp4 Browse 


AVI > 


bitrate= 336. 3kbits/s speed=16. 5x 7 
frame=13297fm8=307.n= size ALA time=0N:N9- 

bitrate= 336..| 8] Success 
frame=13505; 


frame=13714' O Video successfully converted. [15 


bitrate= 342. 2kbits/s speed=16.6x 
video: 1466 1kB audio:9316k8 subtitle:OkB other streams:0kB global 
headers:0kB muxing overhead: 3.897527% 


Convert 


The QProcess class provided by Qt is used to start external programs and communicate with 
them. In this case, we started ffmpeg. exe located in C: /FFmpeg/bin/ as a process and 
started communicating with it. We also sent it a set of arguments to tell it what to do when 
started. The arguments we used in this example are relatively basic; we only told FFmpeg the 
path to the source image and the output filename. For more information regarding the argument 
settings available in FFmpeg, check out https: / /www. ffmpeg.org/ffmpeg.html. 


FFmpeg does more than just converting video files. You can also use it to convert audio 
files and even images. For more information regarding all the formats supported by FFmpeg, 
check out https: / /www.ffmpeg.org/general .htmlfFile-Formats 


Other than that, you can also play a video or audio file by running £fplay . exe, located in 
C: /FFmpeg/bin, or print out the information of the video or audio file in human-readable 
fashion by running ffprobe . exe. Check out FFmpeg's full documentation at https: / / 
www. ffmpeg.org/about.html. 


There are lots of things you can do using this method. It means that you're not limited to what Qt 
provides and you can break out of such limitations by carefully selecting a third-party program 
that provides what you need. One such example is making your own anti-virus GUI by utilizing the 
command-line-only anti-virus scanners available on the market, such as Avira ScanCL, Panda 
Antivirus Command Line Scanner, SAV32CL!I, ClamavNet, and so on. You can build your own GUI 
using Qt and essentially send commanas to the anti-virus process to tell it what to do. 
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Currency conversion 


In this example, we will learn how to create a simple currency converter using Qt, with the help 
of an external service provider called Fixer.io. 


How to do it... 


Make yourself a currency converter with these simple steps: 
1. We start by opening Qt Creator and creating a new Qt Widgets Application project 
from File | New File or Project. 
2. Next, open up the project file (. pro) and add the network module to our project: 
QT += core gui network 
3. After that, open Up mainwindow.ui and remove the menu bar, tool bar, and status 
bar from the Ul. 


4. Then, add three horizontal layouts, a horizontal line, and a push button to the 
canvas. Once they're all placed, left-click on the canvas and follow by clicking the Lay 
Out Vertically button above the canvas. Then, set the label of the push button as 
Convert. The Ul should now look something like this: 


1] n ” 
| | 
| 
" 
n ] 
Convert 
n ” 1] 


5. After that, add two labels to the top layout and set the text of the left one as From:, 
followed by the right one as To:. Right after that, add two line edit widgets to the 
second layout and set both their default values as 1: 


1] 1] ” 
From: To: |] 
| 1 1 
a * —_—_—aeÁa_auamu —_ umm  _ —  ——— E] 
Convert 
n - L] 
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6. Before we proceed to add the last batch of widgets to the last layout, let's select 
the line edit on the right and enable the readonly checkbox located in the 
property pane: 


> alignment pLeft, AlignVCenter 
dragEnabled 
readOnly 
Y placeholderTed 
translatable 


disambiguation 


7. Other than that, we also must set its cursor property to Forbidden so that users know 
it's not editable when mousing over the widget: 


palette Inherited 

> font A. [MS Shell Dig 2, 8] 
mouseTracking + Size All A 
focusPolicy Blank 


== Split Vertical 
«p Split Horizontal 


acceptDrops ) Pointing Hand 
- tooip 
toolTipDuration Open Hand 
, z $7 Closed Hand 
RE PDiresr E 


8. Once you're done with that, let's add two combo boxes to the third layout located at 
the bottom. We will just leave them empty for now: 


contextMenuPolicy 


” ” ” 
From: To: 
>| 

= A. 

Convert 
" " . 


9. After that, right-click on the Convert button and select Go to slot.... A window will now 
pop up, asking you to select an appropriate signal. Let's keep the default clicked () 
signal as the selection and click OK. Qt Creator will now automatically add a slot 
function for you to both mainwindow.h and mainwindow.cpp. 
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10. Next, open Up mainwindow.h and make sure the following headers are being added 
to the top of the source file: 


Hinclude <OMainWindow> 

Hinclude <ODoubleValidator> 
Hinclude <QONetworkAccessManager> 
Hinclude <QNetworkRequest> 
Hinclude <QNetworkReply> 
Hinclude <OJsonDocument > 
Hinclude <Q0Json0bject> 

Hinclude <QDebug> 


Hinclude <QOMessageBox> 


11. Then, we need to add another slot function called finished (): 


private slots: 
void on convertButton clicked(); 
void finished (QNetworkReply* reply); 


12. Besides that, we also need to add two variables under the private label: 


private: 
Ui::MainWindow *+tui; 
QNetworkAccessManager* manager; 
QString targetCurrency; 


13. Once you're done, let's open Up mainwindow.cpp this time. We will add several 
currency shortcodes to both the combo boxes in the class constructor. We also set 
a validator to the line edit widget on the left so that it can only accept inputs that 
are numbers. Lastly, we also initialize the network access manager and connect its 
finished () signal to our finished () slot function: 


MainWindow: :MainWindow(QWidget *parent) 
OMainWindow (parent), ui(new Uli: :MainWindow) 


ui->setupui (this); 


QOStringlList currencies; 

currencies.push back ("EUR"); 
currencies.push back ("USD"); 
"CAD"); 
"MYR"); 
currencies.push_back ("GBP"); 


( 
currencies.push back ( 
currencies.push back ( 
( 
ui->currencyFrom->insertltems(0, currencies); 
ui->currencyTo->insertltems (0, currencies); 


www.it-ebooks.info 


Chapter 7 


QValidator *inputRange = new QDoubleValidator (this); 
ui->amountFrom->setValidator (inputRange) ; 


manager = new ONetworkAccessManager (this); 


connect (manager, SIGNAL (finished (QNetworkReply*)), 
this, SLOT(finished(QONetworkReply*))); 


) 


14. After that, we define what will happen if the Convert button is being clicked by 
the user: 


void MainWindow: :on convertButton _clicked () 


( 


1f (ui->amountFrom->text() != "") 

( 
ul->convertButton->setEnabled (false); 
QOString from = ui->currencyFrom->currentText (); 
QString to = ui->currencyTo->currentText (); 
targetCurrency = to; 
OString url = "http://api.fixer.io/latest?base=" + 

from + "Ssymbols=" + to; 

QNetworkRequest request= QNetworkRequest (QUrl (url))'; 
manager->get (request); 

) 


else 


( 


OMessageBox::warning(this, "Error", "Please insert a value."); 


) 


15. Lastly, define what will happen when the finished () signal is triggered: 
void MainWindow::finished(QNetworkReply* reply) 


( 
OByteArray response = reply->readAll/(); 
aDebug () << response; 
OJsonDocument jsonResponse = OJsonDocument : : fromJson (response) ; 
QJson0bject jsonO0bj = jsonResponse.object (); 
QJson0bject json0bj2 = json0bj.value ("rates") .to0bject (); 
double rate = json0bj2.value (targetCurrency) .toDouble (); 


1f (rate == 0) 

rate = 1; 
double amount = ui->amountFrom->text () .toDouble(); 
double result = amount * rate; 


ui->amountTo->setText (OString: :number (result)); 
ul->convertButton->setEnabled (true); 
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16. Compile and run the project now and you should be able to get a simple currency 
converter that looks like this: 


E) MainWindow = O Xx 


Similar to the previous example we saw, which uses an external program to achieve 
a specific task, this time we use an external service provider who provided us with an 
open Application Programming Interface (API) that is free for all and easy to use. 


This way, we don't have to think about the method to retrieve the latest currency rate. Instead, 
the service provider has already done the job for us and we just have to send a polite request 
and ask for it. Then, we just wait for the response from their server and process the data 
according to our intended purposes. 


There are quite a few different service providers you can choose from besides 
Fixer.io(http://fixer.io). Some are free but without any advanced features; some 
provide you with additional functionalities, although they come at a premium price. Some 

of these alternatives are Open Exchange Rate (https : / /openexchangerates . org), 
Currencylayer (https: //currencylayer. com), Currency API (https: //currency-api. 
appspot . com), XE Currency Data API (http: //www.xe.com/xecurrencydata), and 
Jsonrates (http: //jsonrates. com). 


Besides currency exchange rates, you can also use this method to do other more advanced 
tasks that are perhaps too complicated to do by yourself, or are simply impossible to access 
unless you use the services provided by specialists, for example, programmable Short 
Message Service (SMS) and voice services, web analytics and statistic generation, online 
payment gateways, and the list goes on. Most of these services are not free, but you can 
easily achieve those functions in minutes without even setting up the server infrastructure, 
backend system, and whatnot; it's definitely the cheapest and fastest way to get your product 
up and running without much hassle. 
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In this chapter, we will cover the following recipes: 


» Setting up SQL Driver for Qt 

» Connecting to a database 

» Writing basic SQL queries 

» Creating a login screen with Qt 

» Displaying information from a database on a model view 


» Advanced SQL queries 


Introduction 


SQL stands for Structured Query Language, a special programming language used to 
manage data held in a relational database management system. A SQL server is a database 
system designed to use one of the many types of SQL programming language to manage 

its data. 


e ¿ If you want to learn more about SQL, visit this link: http: / /www. 
Es ; 
S w3schools.com/sql/sql_intro.asp. 


Qt supports several different types of SQL driver in the form of plugins/add-ons. However, 
it's very easy to integrate these drivers to your Qt project. We will learn how to do it in the 
following example. 
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How to do it... 


Let's set up our SQL server before we dive into Qt: 


1. 


Before setting up Qt for SQL, we need to install and set up a MySQL server. There are 
many ways you can install it. The first method is to download MySQL from the official 
website at http: //dev.mysql.com/downloads /mysql / and install it. After that, 
you also need to install the MySQL Workbench from http: //dev.mysql .com/ 
downloads /workbench/ to administrate your databases. 


An alternative method is to install a third-party package that comes with MySQL and 
other useful applications, such as Apache web server, phpMyAdmin, and so on, all in 
a unified installer. Examples of such packages are XAMPP, https : / /sourceforge. 
net/projects/xampp/, and AppServ, https: / /www.appservnetwork.com/ 
en/download/. 


In this example, we will install XAMPP. Open up your web browser, download the 
XAMPP installer from https: //sourceforge.net/projects/xampp/, and 
proceed to install it on your computer. 


Once you have installed XAMPP, open up XAMPP Control Panel and you should see 
something like this: 


169 | XAMPP Control Panel v3.2.2 


Modules 
Service Module PID(s) Port(s) Actions 


Apache min Shell 


(8) Netstat 


MySQL imin [y Explorer 


FileZilla Amin [E Services 


Mercury 


43) Help 
El Qutt 


Tomcat 


3:47:46 PM [main] Initializing Control Panel 
3:47:46 PM [main] Windows Version: Windows Server 2012 R2 64-bit 
PM [main] XAMPP Version: 5.5.30 
PM [main] Control Panel Version: 3.2.2 [ Compiled: Nov 12th 2015 ] 
PM [main] Running with Administrator rights - good! 
46 PM [main] XAMPP Installation Directory: "c-xampp5.61" 
PM [main] Checking for prerequisites 
Pi [main] All prerequisites found 
46 PM [main] Initializina Modules 
um 


What we need is the Apache web server and the MySQL database server. Click the 
Start buttons next to the Apache and MySQL options on the control panel. 


Once the servers have been started, open up your web browser and visit 
http: //localhost /phpmyadmin/. You will see a web interface by the 
name of PhpMyAdmin that looks like this: 
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phpMyAdmin [A Semver: 127.0.0.1 E 
380 6 Databases [j SQL ¡ik Status 23 Users lea Export ¡=) Import Y More 
Recent Favorites 
> e seneral settings Database server 
—lg New D 
| Dar 8» Change password + Server: 127.0.0.1 via TCPAP 
0 E $ A = Server connection collation £y + Server type: MySQL 
3) information_schema + Server version: 5.6.24 - MySQL 


+) myproject 

+) mysql 

+) performance_schema 
+ phpmyadmin 


utf8mb4_unicode_ci v 


| £7 Language 8): | English 


¿3 Theme: | pmahomme Y 
+ Apache/2.4.12 (Win32) 
OpenSSL/1.0.11 PHP/5.6.8 
+ Font size: 82% |Y + Database client version: libmysq! - 


¿$ More settings 


Community Server (GPL) 
+ Protocol version: 10 
+ User: reonyx(Mlocalhost 


+ Server charset: UTF-8 Unicode 
(utf8) 


mysqind 5.0.11-dev - 20120503 - 

Sid 
3c688b6bbc30d36af3ac34fdd4b7b5b 
$ 


+ PHP extension: mysqli 6) 


phpMyAdmin is a web-based utility that help yyu manage your MySQL databases, 
much like the official MySQL Workbench. In my opinion, phpMyAdmin ¡is a lot simpler 
and better suited for beginners, which is why | recommend using it instead of MySQL 
Workbench. 


By default, phpMyAdmin automatically logs in to MySQL using the default user 
account root, which is saved in its configuration file. We don't want to use that 

for security reasons. So the next thing we need to do is to create an account for 
ourselves. Go to the Users tab located at the top and once you're on that page, click 
Add user located at the bottom. Key in your desired username and password in the 
fields in the login information pane. Choose Local for the Host option for now. At the 
bottom, you will see options related to Global privileges; check the Check All option 
and click Go: 


Login Information 
User name 
Use text field: v | [yourusername 
Host 
Local v | | localhost 13) 
Password 
Use text field: v| |¡eocccces 
Re-type 
soe...... 
Generate password 
Generate 
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9. 


10. 


11. 


12. 


Now that you have created your user account, go to XAMPP Control Panel and click 
Stop for both Apache and MySQL. Then, click the Config button on the Apache 
column and select the phpMyAdmin (config.inc.php) option. After that, the 
config. inc. php file will be opened with your choice of text editor. 


Search for the following line in config. inc.php and change the word config to 
cookie: 

$cfg['Servers'] [$1] ['auth_type']l = 'config'; 

$cfg['Servers'] [$1] ['auth_type'] = 'cookie'; 


After that, start Apache and MySQL again by clicking the Start buttons. This way, 
we force phpMyAdmin to reload its configurations and apply the changes. Go to 
phpmyAdmin again from your web browser, and this time around, a login screen 
should appear on the screen: 


phpMyAdmin 
Welcome to phpMyAdmin 


Language 


English 


Log in 6 
Username: 


Password: 


Log in to phpMyAdmin, then click on the New link located on the side bar: 


— y New 


edcol 
, 3) information_schema 
+ 1) myproject 
E 1) mysql 
. y performance_schema 
+ — y phpmyadmin 
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13. Key in your desired database name and press the Create button. Once it's been 
created, the database name will appear on the side bar. Click on the database name 
and it will bring you to another page, which displays a message, No tables found in 
database. Under the message, you can create your first data table by filling in your 
desired table name and the number of columns for the table: 


GCreate table 


Name: | employee Number of columns: |5 a 


14. After you click the Go button, you will be brought to another page where you will set 
up the new table you're going to create. In this example, we created an employee 
table that consists of five columns of data: id, name, age, gender, and married: 


Name Type ús, Length/Values ¿, Default” Null Index Al 
4 Y 
id INT dá y PRIMARY ns 
y 
name VARCHAR ys 50 h v E y 
age INT v Y Eo Y 
y 
gender INT v ) vw =e Y 
married BOOLEAN ei ) v -— v 


15. Once you are done with that, click Save and now you will be able to see the 
employee table name appear on the side bar. We have successfully installed 
MySQL and set up our first database and data table. 
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16. After that, we need to insert data into the database from phpMyAdmin so that we will 
be able to retrieve it in the next example. Click on the Insert tab while you're still in 
the employee table; you will then be brought to another page for inserting new data 
into the employee table: 


Column Type Function Null Value 
id int(11) 


e 1 
name  varchar(50) 
v John Doe 
age int(11) 


gender int(11) 


married  tinyint(1) 


17. Next, we will proceed to set up the SQL driver for our Qt project. Basically, all you need 
to do is to go to your Qt installation folder and look for the sq1drivers folder. For 
example, mine is located at C:10t15.51mingw492_32Xpluginslsqldrivers. 


18. Copy the entire sqgldrivers folder to your project's build directory. You can remove 
the DLL files that are not relevant to the SQL server you're running. In our case, 
since we're using a MySQL server, we can delete everything except qasqlmysql .d11 
and qsqlmysqld.d11. The DLL file with the letter d at the back is for debug builds 
only, while the other one is for release builds. Put those DLL files in their respective 
build directories, for example, builds/debug/sgqldrivers/gqsqglmysqld.d11l 
for debug builds and builds/release/sgqldrivers/qsqlmysql.dl11 for 
release builds. 


19. The DLL files mentioned in the previous step are the drivers that enable Qt to 
communicate with different types of SQL architecture. You may also need the DLL 
file of the SQL client library in order for the driver to work. In our case, we need 
libmysqgl.d11 to be located in the same directory as our program's executable. 
You can either get it from the installation directory of MySQL or download the 
Connector/C++ package from the official website, https: //dev.mysql .com/ 
downloads /connector/cpp/. 


Qt provides us with SQL drivers so that we can easily connect to different types of SQL servers 
without implementing them ourselves. 


Currently, Qt officially supports SQLite, MySQL, ODBC, and PostgreSQL. SQL architectures that 
are forks from one of the supported architectures, such as MariaDB (a fork of MySQL), may 
still compatible with Qt without much problem. 


[212] 
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If you are using an architecture that isn't supported by Qt, you can still interact with your 
SQL database indirectly by sending an HTTP request using QNetworkAccessManager to 
your backend script (such as PHP, ASP, JSP, and so on), which can then communicate 
with the database. 


If you only need a simple file-based database and don't plan to use a server-based database, 
SQLite is a good choice for you. 


Connecting to a database 


In this recipe, we will learn how to connect to our SQL database using Qt's SQL module. 


How to do it... 


Connecting to SQL server in Qt is really simple: 


1. First of all, open up Qt Creator and create a new Qt Widgets Application project. 
2. Open up your project file (. pro) and add the SQL module to your project, like so: 


QT += core gui sql 


3. Next, open Up mainwindow.ui and drag seven label widgets, a combo box, and a 
checkbox to the canvas. Set the text properties of four of the labels to Name :, Age :, 
Gender :, and Married:. Then, set the objectName properties of the rest to name, 
age, gender, and married. There is no need to set the object name for the previous 
four labels because they're for display purposes only: 


Name: . TextLabel 
Age: TextLabel 


Gender: Male o 


Married: 
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4. Afterthat, 


open Up mainwindow.h and add the following headers below the 


OMainWindow header: 


Hinclude 
Hinclude 
Hinclude 
Htinclude 
Hinclude 


<O0MainWindow> 
<QtSql> 
<QSgqlDatabase> 
<QSqlQuery> 
<QDebug> 


5. Then, open Up mainwindow.cpp and insert the following code to the class 


constructor: 
MainWindow: :MainWindow(QWidget *parent) 
OMainWindow (parent), ui(new Uli: :MainWindow) 
( 
ui->setupui (this); 
QSglDatabase db = QSglDatabase: :addDatabase ("QMYSQL") ; 


db.set 
db.set 
db.set 
db.set 


if (db 

( 
QSql 
if ( 
employee 


( 


HostName ("127.0.0.1"); 
UserName ("yourusername") ; 
Password ("yourpassword")'; 
DatabaseName ("databasename"); 


.Open()) 
Query query; 


query.exec ("SELECT name, age, gender, married FROM 
")) 


while (query.next ()) 


( 


) 
J 


else 


( 


aDebug() << query.value(0) << query.value (1) << 
query.value(2) << query.value (3); 


ui->name->setText (query.value (0) .toString()); 
ui->age->setText (query.value (1) .toString()); 
ui->gender->setCurrentIndex (query.value (2) .tolInt ()); 
ui->married->setChecked (query.value (3) .toBool ()); 


aqDebug() << query.lastError () .text (); 
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db.close(); 


) 


else 


( 


aqDebug() << "Failed to connect to database."; 
) 
) 


6. Compile and run your project now and you should get something like the following; 


E) MainWindow - Xx 


The previous example shows you how to connect to your SQL database using the 
OSqlDatabase class derived from the SQL module. You won't be able to access 
any of the classes related to SQL without adding the module to your Qt project. 


We must tell Qt which SQL architecture we are running by mentioning it when calling the 
addDatabase () function. Options supported by Qt are QOSQLITE, QOMYSQL, QMYSQL3, 
QODBC, QODBC3, QPSQL, and QPSQL7 


If you encounter an error message that says, QSqlDatabase: QMYSQL driver not loaded, 
then you should again check whether the DLL files are placed in the correct directory. 


We can send our SQL statements to the database through the 0Sq1Query class, and wait for 
it to return the results, which usually are either the data you requested or error messages due 
to invalid statements. 


If there is any data coming from the database server, it will all be stored in the 0Sq1Query 
class. All you need to do to retrieve this data is to do a while loop on the 0Sq1Query class 
to check for all existing records, and retrieve them by calling the value () function. 
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Writing basic SQL queries 


In the previous example, we wrote our very first SQL query, which involves the SELECT 
statement. This time, we will learn how to use some other SQL statements, such as INSERT, 
UPDATE, and DELETE. 


How to do it... 


Let's create a simple program that demonstrates basic SQL query commands by following 
these steps: 


1. We can use our previous project files, but there are couples of things we need to 
change. First, open Up mainwindow.ui and replace the labels for name and age 
with line edit widgets. Then, add three buttons to the canvas and call them Update, 
Insert, and Delete: 


Update Insert Delete 


2. After that, open Up mainwindow.h and add the following variables under private 
inheritance: 
private: 
Ui::MainWindow *+tui; 
QSgqlDatabase db; 
bool connected; 
int currentlD; 


3. Next, open Up mainwindow.cpp and go to the class constructor. It is still pretty 
much the same as the previous example, except we store the database connection 
status in a Boolean variable called connected and we also obtain the ID of the data 
from the database and store it to an integer variable called current ID: 


MainWindow: :MainWindow(QWidget *parent) 
QOMainWindow (parent), ui(new Uli: :MainWindow) 


( 
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ul 


db 


db. 
db. 
db. 
db. 


co 


if 


( 


empl 


) 


el 


( 


) 


->setupui (this); 


= QOSglDatabase: :addDatabase ("QMYSQL"); 
setHostName("127.0.0.1"); 

setUserName ("yourusername"); 
setPassword ("yourpassword"); 
setDatabaseName ("databasename"); 


nnected = db.open(); 
(connected) 


OSqlQuery query; 
if (query.exec ("SELECT id, name, age, gender, married FROM 
oyee")) 


( 


while (query.next ()) 


( 


currentID = query.value(0) .tolnt (); 
ui->name->setText (query .value (1) .toString()); 
ui->age->setText (query .value (2) .toString()); 
ui->gender->setCurrentIndex (query.value (3) .tolnt ()); 
ui->married->setChecked (query .value (4) .toBool ()); 


) 


else 


( 


aDebug () << query.lastError() .text (); 


se 


gqDebug() << "Failed to connect to database."; 


Then, go to mainwindow.ui and right-click on one of the buttons we added to 
the canvas in step 1. Select Go to slot... and click OK. Repeat these steps on the 


other 


button, and now you should see three slot functions being added to both your 


mainwindow.h and mainwindow.cpp: 


private slots: 


vO 
vo 


vO 


id on updateButton clickea(); 
id on insertButton clickea(); 
id on deleteButton clickea(); 
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5. 


After that, open Up mainwindow.cpp and we will declare what the program will do 
when we click on the Update button: 


void MainWindow: :on updateButton_clicked() 


( 
if 


( 


(connected) 


if (currentID == 0) 


( 
) 


aDebug() << "Nothing to update."; 


else 


( 


) 


else 


( 


QOString id = QOString::number (currentID); 
QString name = ui->name->text (); 
OString age = uli->age->text (); 
OString gender = QOString: :number 
(ui ->gender->currentIndex()); 
QString married = QString: :number (ul->married->isChecked ()); 


aDebug() << "UPDATE employee SET name = '" + name + "', 
age = '" + age + "', gender = " + gender + ", 
married = " + married + " WHERE id = " + id; 


OSgqlQuery query; 


if (query.exec ("UPDATE employee SET name = '" + name + "', 
age = '" + age + "', gender = " + gender + ", 
married = " + married + " WHERE id = " + id)) 


aDebug() << "Update success."; 


) 


else 


( 


aDebug () << query.lastError() .text (); 


aqDebug() << "Failed to connect to database."; 
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6. Once you have done that, we will proceed to declare what will happen when the 


Insert button is clicked: 


void MainWindow::on insertButton clicked() 


( 


1f (connected) 


( 


OString name = ui->name->text (); 
QOString age = ui->age->text (); 


QOString gender = QString: : number (ui->gender->currentIndex ()); 


QOString married = QString: :number (ul->married->isChecked ()); 


aDebug() << "INSERT INTO employee (name, 
married) VALUES ('" + name + "','" + age + 


" + gender + "," + married + ")"; 


OSqlQuery query; 


if (query.exec ("INSERT INTO employee (name, 
married) VALUES ('" + name + "','" + age + 


" + gender + "," + married + ")")) 


currentID = query.lastInsertld().tolnt(); 


aDebug() << "Insert success."; 


) 


else 


( 


aDebug () << query.lastError() .text (); 


) 


else 


( 


gDebug() << "Failed to connect to database."; 


) 


gender, 


7. After that, we also declare what will happen when the Delete button is clicked: 


void MainWindow::on deleteButton _clicked() 


( 


1f (connected) 


( 


1f (currentIlD == 0) 


( 


gDebug() << "Nothing to delete."; 
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8. 


else 


( 


QString id = QOString::number (currentID); 


aDebug() << "DELETE FROM employee WHERE id = " + id; 
QOSglQuery query; 
if (query.exec ("DELETE FROM employee WHERE id = " + id)) 


( 


currentID = 0; 
aDebug() << "Delete success."; 


) 


else 


( 


aDebug() << query.lastError() .text (); 


) 


else 


( 


gqDebug() << "Failed to connect to database."; 


) 


Lastly, call OSqlDatabase: : close () at the class destructor to properly terminate 
the SQL connection before exiting the program: 


MainWindow: : -MainWindow () 
( 

db.close(); 

delete ul; 


) 


Compile and run the program now and you should be able to select the default data 
from the database; then you can choose to update it or delete it from the database. 
You can also insert new data into the database by clicking the Insert button. You can 
use phpMyAdmin to check whether the data is being altered correctly or not: 


+ Options 

T> v id name age gender married 
O 4 Edit Fe Copy Q Delete 1 John Doe 42 0 0 
O 4 Edit Fe Copy Q Delete 2 Jane Smith 26 1 0 
T O Check All With selected:  ¿F Change Q Delete ¡a Export 
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It's very important to check whether or not the database is connected in the first place before 
we proceed to send a SQL query to the database. Therefore, we keep that status in a variable 
and use it to check before sending out any queries. This, however, is not recommended for 
complex programs that are kept open for long periods of time, as the database might get 
disconnected during these periods, and a fixed variable may not be accurate. In that case, 
it's better to check the actual status by calling OSqlDatabase: : isOpen (). 


The current ID variable is used to save the ID of the current data you obtained from the 
database. When you want to update the data or delete it from the database, this variable ¡is 
crucial for letting the database know which data you're trying to update or delete. If you set 
your database table correctly, MySQL will treat each item of data as a unique entry, so you can 
be sure that no repeated ID will be produced in the database when new data is being saved. 


After inserting new data into the database, we call 0Sq1Query : : lastInsertld () to obtain 
the ID of the new data and save ¡tas a current ID variable, so that it becomes the current 
data that we can update or delete from the database. 


lItis a good habit to test your SQL queries on phpMyAdmin first before using them in Qt. You 
can instantly find out whether your SQL statements are correct or incorrect, instead of waiting 
for your project to get built, then try it out, then rebuild again. As a programmer, we must work 
in the most efficient way. Work hard, and work smart. 


Creating a login screen with Qt 


In this recipe, we will learn how put our knowledge to use and create a functional login screen 
using Qt and MySQL. 
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How to do it... 


Create your first functional login screen by following these steps: 


1. First, open up a web browser and go to phpMyAdmin. We will create a new data table 
called user, which looks like this: 


Table name: | user Add |1 column(s) Go 

Name Type y Length/Values ¿y Def; Attributes Null Index Al 
id INT v v PRIMARY Y Y 
username VARCHAR v 50 Y Y: 
password VARCHAR e 50 Y v _ 
employeelD INT va Y v 


2. Next, insert our first item of data into the newly created table and set the 
employeeIDto the ID of an existing employee's data. This way, the user 
account we created will be linked to the data of one of the employees: 


Column Type Function Null Value oO pins 3 a 
” 111) “T> y id name age gender married 
Ñ mt(11) 
MN $ Edit He Copy G 1 John Doe 42 0 0 
username  varchar(50) $ Edit He Cop, 2 Jane Smith 26 1 0 
Ne test E 


password varchar(50) 


employeelD — int(11) 


3. After that, open up Qt Creator and create a new Qt Widgets Application project. We 
will start off with mainwindow. ui. First, place a stacked widget on the canvas and 
make sure it contains two pages. Then, set up the two pages in the stacked widget 
like this: 
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[=] |... [=] [=] 
4» 4» 
Name: . TextLabel 
Age: TextLabel 
Uemame [|] a 
Password: | ] Married: TextLabel 
A la] a [=] 
Login 
Log Out 
[=] A] l=] [=] 


4. Then, on the first page of the stacked widget, click the Edit Tab Order button on top 
of the widget so that we can adjust the order of the widgets in our program: 


SAO AT AE 


Leigh Order] 


5. Once you click the Edit Tab Order button, you will see some numbers appear on top 
of each widget in the canvas. Make sure the numbers look like this. Otherwise, click 
on the numbers to change their order. We only do this for the first page of the stacked 
widget; it's okay to keep the second page asit is: 
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6. Next, right-click on the Login button and select Go to slot.... Then, make sure the 
clicked() option is selected and press OK. Qt will then create a slot function for 
you in your project source files. Repeat this step for the Log Out button as well. 


7. Then, open Up mainwindow.h and add the following headers after the line 
Hinclude <OMainWindow>: 


Hinclude <OMainWindow> 
tinclude <QtSql> 
Htinclude <QSqlDatabase> 
Htinclude <QSqlQuery> 
Htinclude <QMessageBox> 
tinclude <QDebug> 


8. After that, add the following variable to mainwindow. h: 


private: 
Uli: :MainWindow *+tul; 
QSgqlDatabase db; 


9. Once we're done with that, let's open Up mainwindow.cpp and put this code in the 
class constructor: 


MainWindow: :MainWindow(QWidget *parent) 
OMainWindow (parent), 
ui (new Uli: :MainWindow) 


ui->setupui (this); 
ui->stackedWidget->setCurrentIndex (0); 

db = QSgqlDatabase: :addDatabase ("QMYSQL"); 
db.setHostName ("127.0.0.1"); 
db.setUserName ("yourusername"); 
db.setPassword ("yourpassword") ; 
db.setDatabaseName ("databasename"); 


if (!db.open()) 


( 


J 
) 


10. After that, we will define what will happen if the Login button is clicked: 


qDebug() << "Failed to connect to database."; 


void MainWindow: :on loginButton clicked() 


( 


OString username = ui->username->text (); 
OString password = ui->password->text (); 
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OSglQuery query; 
if (query.exec ("SELECT employeeID from user WHERE 


username = '" + username + "' AND password = '" + 
password + "'")) 


if (query.size() > 0) 
( 
while (query.next ()) 
( 
OString employeeID = query.value (0) .toString(); 
OSqlQuery query2; 
if (query2.exec ("SELECT name, age, gender, 
married FROM employee WHERE id = " + employeelID)) 
( 
while (query2.next ()) 
( 
OString name = query2.value(0) .toString(); 
OString age = query2.value (1) .toString(); 
int gender = query2.value (2) .tolInt (); 
bool married = query2.value (3) .toBool1 () ; 
ul->name->setText (name) ; 
ui->age->setText (age) ; 
if (gender == 0) 
ui->gender->setText ("Male"); 
else 
ui->gender->setText ("Female"); 
1f (married) 
ul->married->setText ("Yes"); 
else 
ul->married->setText ("No"); 
ui->stackedWidget->setCurrentIndex (1); 
) 
) 
) 
) 
else 
( 
OMessageBox::warning(this, "Login failed", 


"Invalid username or password."); 
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) 


else 


( 


aDebug () << query.lastError() .text (); 


) 
) 
11. Then, we also define what will happen if the Log Out button is clicked: 


void MainWindow::on logoutButton _clicked() 


( 


ui->stackedWidget ->setCurrentIndex (0); 


) 


12. Lastly, close the database when the main window is closed: 


MainWindow: : -MainWindow () 


( 


db.close(); 


delete ul; 


) 


13. Compile and run the program now and you should be able to log in with the dummy 
account. After you have logged in, you should be able to see the dummy employee 
information linked to the user account. You can also log out by clicking on the Log 


Out button: 
A) MainWindow - O Xx E] MainWindow ll O Xx 
Name: — JohnDoe 
Age: 72 
| Gender: Male 
Password: Married: No 


Login 
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In this example, we select data from the user table that matches the username and password 
that we have inserted into the text fields. If nothing is found, it means we have provided an 
invalid username or password. Otherwise, obtain the employeeID data from the user account 
and do another SQL query to look for information from the employee table that matches the 
employeelD variable. Then, display the data accordingly to the Ul of our program. 


We must set the widget order in the Edit Tab Order mode so that when the program has 
started, the first widget that gets focused on is the username line edit widget. If the user 
presses on the TAB button on the keyboard, the focus should switch to the second widget, 
which is the password line edit. Incorrect widget order will totally ruin the user experience 
and drive away your potential users. 


Do make sure that the echoMode option of the password line edit is set to Password. That 
setting will hide the actual password inserted into the line edit and replace it with dot symbols 
for security purposes. 


Displaying information from a database on a 


model view 


In this recipe, we will learn how to display multiple sets of data obtained from our SQL 
database on a model view in our program. 


How to do it... 


Follow these steps to display information from a database on a model view widget: 


1. We will be using the database table called employee, which we used in the previous 
example. This time, we need a lot more data in the employee table. Open up your 
web browser and log in to your phpMyAdmin control panel. Add data for a few more 
employees so that we can display it later in our program: 


+ Options 
T> v id name age gender married 
S Edit Fe Copy Q Delete 1 John Doe 42 0 0 
O $ Edit He Copy Q Delete 2 Jane Smith 26 1 0 
S Edit He Copy Q Delete 3 Larry King 32 0 1 
¿Edit he Copy Q Delete 4 Jason Freeman 28 0 0 
SÍ Edit he Copy Q Delete 5 Laura Jordan 38 1 1 
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2. After that, open up Qt Creator, create a new Qt Widgets Application project, and then 
add the SQL module to your project. 


3. Next, open Up mainwindow.ui and add a table widget (not table view) from Item 
Widget (Iltem-Based) under the Widget box pane. Select the main window on the 
canvas and click on either the Layout Vertically or Layout Horizontally button to 
make the table widget stick to the size of the main window, even when it's resized: 


4. After that, double-click on the table widget and a window will then appear. Under the 
Columns tab, add five items by clicking on the + button at the top-left corner. Name 
the items ID, Name, Age, Gender, and Married. Click OK when you're done: 


[P- Edit Table Widget Xx 
y 


Columns Rows Items 


1D 
Name 
Age 
Gender 
Married 


e nu. a ¡9 Properties << 


[A ES 


5. Then, right-click on the table widget and select Go to slot... in the pop-up menu. 
Scroll all the way down, select the itemChanged(QTableWidgetltem*) option in the 
pop-up window, and press OK. A slot function will be created in both your source files. 


6. Open Up mainwindow.h and add these private variables to our MainWindow class: 


private: 
Ui::MainWindow *tui; 
bool hasInit; 
QSgqlDatabase db; 


www.it-ebooks.info 


Chapter 8 


7. Wea 
Hinc 
Hinc 
Hinc 
Hinc 
Hinc 
Hinc 


8. Once 


Iso add the following class headers to mainwindow. h: 


lude <QtSqgql> 

lude <0SglDatabase> 
lude <0SqlQuery> 

lude <QMessageBox> 

lude <QDebug> 

lude <OTableWidgetltem> 


you're done with that, open Up mainwindow.cpp and we're going to write 


tons of code there. First, we need to declare what will happen when the program is 
started. Add the following code to the constructor of the MainWindow class: 


MainWindow: :MainWindow(QWidget *parent) 


QM 


ul 


ha 


ul 


db 


db. 
db. 
db. 
db. 


ul 


if 


( 


ainWindow (parent), 
(new Uli: :MainWindow) 


sInit = false; 
->setupui (this); 


= QOSglDatabase: :addDatabase ("QMYSQL"); 
setHostName("127.0.0.1"); 

setUserName ("yourusername"); 
setPassword ("yourpassword"); 
setDatabaseName ("databasename"); 


->tableWidget->setColumnHidden(0, true); 
(db.open()) 


OSqlQuery query; 
if (query.exec("SELECT id, name, age, gender, 
married FROM employee")) 


( 


while (query.next ()) 


( 


aDebug() << query.value(0) << query.value (1) << 
query.value(2) << query.value(3) << query.value (4); 


QString id = query.value(0).toString(); 
OString name = query.value (1) .toString(); 
OString age = query.value (2) .toString(); 
int gender = query.value (3) .toIlnt (); 

bool married = query.value (4) .toBool () ; 
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ui->tableWidget->setRowCount (ui ->tableWidget - >rowCount () 
+ 1); 


QOTableWidgetIltem* idItem = new QTableWidgetlItem(id); 
OTableWidgetIltem* nameltem = new OTableWidgetItem (name) ; 
OTableWidgetlIltem* ageltem = new OTableWidgetltem (age); 
OTableWidgetltem* genderltem = new QOTableWidgetlItem(); 


if (gender == 0) 
genderltem->setData(0, "Male"); 
else 
genderltem->setData(0, "Female"); 


QOTableWidgetltem* marriedItem = new QOTableWidgetlItem(); 


1f (married) 
marriedItem->setData(0, "Yes"); 
else 
marriedItem->setData(0, "No"); 


ui->tableWidget->setlItem(ui->tableWidget->rowCount () - 
1, 0, idItem); 
ui->tableWidget->setlItem(ui->tableWidget->rowCount () - 
1, 1, nameltem); 
ui->tableWidget->setlItem(ui->tableWidget->rowCount () - 
1, 2, ageltem); 
ui->tableWidget->setlItem(ui->tableWidget->rowCount () - 
1, 3, genderlItenm); 


ui->tableWidget->setlItem(ui->tableWidget->rowCount () - 
1, 4, marriedItem); 


hasInit = true; 


) 


else 


( 


aDebug () << query.lastError() .text (); 


) 


else 


( 


agDebug() << "Failed to connect to database."; 
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After that, declare what will happen when an item of the table widget 
has been edited. Add the following code to the slot function called 
on _tableWidget_itemChanged l(): 
void MainWindow: :on tableWidget_itemChanged (OTableWidgetlItem 
*item) 
( 
if (hasInit) 
( 
QOString id = ui->tableWidget->item(item->row(), 
0) ->data (0) .toString(); 
OString name = ui->tableWidget->item(item->row(), 
1) ->data (0) .toString(); 
OString age = OString: «number (ui->tableWidget -> 
item(item->row(), 2)->data(0) .tolnt ()); 
ui->tableWidget->item(item->row(), 2)->setData(0, age); 


OString gender; 
if (ui->tableWidget->item(item->row(), 3)-> 


data(0).toString() == "Male") 
( 
gender = "0"; 
) 
else 
( 
ui->tableWidget->item(item->row(), 3)->setData(0, "Female"); 
gender = "1"; 


) 


QOString married; 
if (ui->tableWidget->item(item->row(), 
4)->data(0).toString() == "No") 


married = "0"; 


) 


else 


ui->tableWidget->item(item->row(), 4)->setData(0, "Yes"); 
married = "1"; 


aDebug() << id << name << age << gender << married; 
OSglQuery query; 
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if (query.exec ("UPDATE employee SET name = '" + name + "', 
age = '" + age + "', gender = '" + gender + "', 
married = '" + married + "' WHERE id = " + 1d)) 
OMessageBox::information(this, "Update Success", "Data 


updated to database."); 


) 


else 


( 


aDebug () << query.lastError() .text (); 


) 


10. Lastly, close the database at the class destructor: 


MainWindow: : -MainWindow () 


( 


db.close(); 
delete ui; 


) 


11. Compile and run the example now and you should be getting something like this: 


A] MainWindow = O Xx 
Name Age Gender Married 
1 John Doe 142] Male No 
2 Jane Smith 26 Female No 
3 Larry King 32 Male Ves 
4 Jason Freeman 28 Male No 
5 Laura Jordan 38 Female Yes 
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Atable widget is similar to the one you see in spreadsheet applications such as Microsoft 
Excel and Open Office Calc. In contrast with other types of model viewers such as list view or 
tree view, table view (or table widget) is a two-dimensional model viewer, which displays data 
in the form of rows and columns. 


The main difference between a table view and table widget in Qt is that a table widget is built 
on top of a table view class, which means a table widget is easier to use and more suitable for 
beginners. However, a table widget is less flexible and tends to be less scalable than a table 
view, which is not the best choice if you want to customize your table. 


After retrieving data from MySQL, we created a OTableWidget Item item for each of the 
data items and set which column and row should be added to the table widget. Before 
adding an item to the table widget, we must increase the row count of the table by calling 
OTableWidget : : setRowCount (). We can also get the current row count of the table 
widget by simply calling OTableWidget : : rowCount (). 


The first column from the left is hidden from view because we only use it to save the 1D of 
the data so that we can use it to update the database when one of the data items in its row 
has changed. 


The slot function on_tablewWidget_itemChanged () will be called when the data in one 
of the cells has changed. It will not only get called when you edit the data in the cell, but also 
when the data is first added to the table after being retrieved from the database. To ensure 
that this function is only triggered when we edit the data, we used a Boolean variable called 
hasInit to check whether we have done the initialization process (adding the first batch of 
data to the table) or not. If hasInit is false, ignore the function call. 


To prevent users from entering a totally irrelevant type of data, such as inserting alphabets 
into a supposedly numerical-only data cell, we checked manually whether the data is anything 
close to what we'd expected when it's being edited. Revert itto a default value if it doesn't 
come close to anything considered as valid. This is of course a simple hack, which does the 
job but is not the most professional method. Alternatively, you can try to create a new class 
that inherits the OTtemDelegate class and define how your model view should behave. 
Then, call 0OTableWidget : :setItemDelegate () to apply the class to your table widget. 


Advanced SQL queries 


By following this recipe, we will learn how to use advanced SQL statements such as INNER 
JOIN, COUNT, LIKE, DISTINCT, and so on. 
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How to do it... 


You can do a lot more than just perform simple queries of SQL database: 


1. First of all, we need to add a few tables to our database before we can dive into the 
programming part. Open up your web browser and access your phpMyAdmin. We 
need several tables for this example to work: 


=_ y testing 
y New 


+. branch 
PA department 
be employee 
PY log 

DU user 


2. | will show you the structure of each of the tables required for this project and the 
dummy data inserted to the tables for testing. The first table is called branch, which 
is used to store the IDs and names of different branches of the dummy company: 


+ Options 


“T> v id name 


S Edit He Copy Q Delete 1 New York 


On 4 Edit $e Copy Q Delete 2 California 


S Edit He Copy Q Delete 3 Bangalore 


3. Secondly, we have the department table, which stores the IDs and names of 
different departments of the dummy company, which is also linked to the branch 
data by the branch |Ds: 


+ Options 

“T> v id name branchiD 
S Edit He Copy Q Delete 1 Marketing 1 
7 Edit He Copy Q Delete 2 Engineering 3 
SÍ Edit He Copy Q) Delete 3 Human Resource 2 
7 Edit he Copy Q Delete 4 Purchasing 1 
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4. Next, we also have an employee table, which stores the information of all the 
employees in the dummy company. This table is similar to the one we used in the 
previous examples, except it has two more extra columns, namely birthday and 


department ID: 
+ Options 
T> vw id name age birthday gender married  departmentiD 
S Edit e Copy Q Delete 1 John Doe 42 1974-03-15 0 0 1 
O 7 Edit je Copy (Q Delete 2 Jane Smith 26 1990-08-06 1 0 1 
SY Edit je Copy Q) Delete 3 Larry King 32 1984-01-28 0 1 2 
O Edit Fe Copy Q Delete 4 Jason Freeman 28 1988-11-21 0 0 4 
S Edit He Copy Q Delete 5 Laura Jordan 38 1978-08-02 1 1 3 


5. Other than that, we also have a table called 1og, which contains dummy records of 
the login time for each employee. The loginTime column can be a timestamp or 
date time variable type: 


+ Options 

“T> yv id userlD  loginTime 
o 4 Edit Fi Copy Q Delete 1 3 2016-04-26 18:24:00 
o 4 Edit 3 Copy Q) Delete 2 1 2016-04-27 11:14:04 
O 4 Edit Fe Copy Q Delete 3 3 2016-04-27 12:24:07 
O 4 Edit He Copy Q Delete 4 3 2016-04-27 02:27:52 
Do 4 Edit je Copy Q Delete 5 2 2016-04-27 16:45:15 
O 4 Edit je Copy Q Delete 6 4 2016-04-28 12:24:18 
O S Edit Hi Copy Q) Delete 7 1 2016-04-28 19:24:21 


6. Lastly, we have the user table that we also used in the previous examples: 


+ Options 

“T> v id usermame password employeelD 
o 4 Edit He Copy Q Delete 1 test test 1 
O Edit e Copy Q) Delete 2 abcd 1234 2 
O 49 .Edit Fe Copy Q Delete 3 testuser 5432abc 3 
O 4 Edit + Copy Q) Delete 4 ¡iamawesome whosdaddy123 4 
o 4 Edit + Copy Q) Delete 5 dot32 asdfgh 5 
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7. Weare done with the database; let's move on to Qt. Open up Qt Creators, and this 
time, instead of choosing Qt Widgets Application, we create Qt Console Application: 


lo New Project 


Choose a template: 
Projects 
Application 
Library 
Other Project 
Non-0t Project 
Import Project 


Files and Classes 


| El Qt Widgets Application 
>] Qt Console Application 
Í] Ot Quick Application 
£ Ot Quick Controls Application 
Wy Ot Canvas 3D Application 


Xx 
All Templates > 


Creates a project containing a single main.cpp file 
with a stub implementation. 


Preselects a desktop Qt for building the application if 
available. 


Supported Platforms: Desktop Android 


Cancel 


8. After you have done creating your console project, open up your project file (. pro) 
and add the SQL module to your project: 


QT += core sql 


QT -= gui 


9. Next, open Up main. cpp and add the following header files to the top of the source 


file: 

Hinclude 
Hinclude 
Hinclude 
Hinclude 
Hinclude 


<QSgqlDatabase> 
<QSqlQuery> 
<QSqlError> 
<QDate> 
<QDebug> 


10. Then, add the following function to display employees who are above 30 years old: 


void filterAge() 


( 


aDebug() << "== Employees above 30 year old =============" 


OSqlQuery query; 


if (query.exec ("SELECT name, 


age FROM employee WHERE age > 30")) 
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while (query.next ()) 


( 


aqDebug() << query.value(0) .toString() << 
query.value (1) .toString(); 


) 


else 


( 


aDebug () << query.lastError() .text (); 


qDebug() << "An"; 


) 


11. After that, add this function for displaying the department and branch information of 
each employee: 


void getDepartmentAndBranch () 


aDebug() << "== Get employees' department and branch 


OSqlQuery query; 

if (query.exec ("SELECT myEmployee.name, department .name, 
branch.name FROM (SELECT name, departmentID FROM employee) 
AS myEmployee INNER JOIN department ON 
department .id = myEmployee.departmentID 
INNER JOIN branch ON branch.id = department .branchID")) 


while (query.next ()) 


( 


aqDebug() << query.value(0) .toString() << 
query.value (1) .toString() << query.value(2).toString(); 


) 


else 


( 


aDebug() << query.lastError() .text (); 


gqDebug() << "An"; 
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12. Next, add this function, which displays employees who are working in the New York 
branch and are below 30 years old: 


void filterBranchAndAge () 


OSqlQuery query; 

if (query.exec ("SELECT myEmployee.name, myEmployee.age, 
department .name, branch.name 
FROM (SELECT name, age, departmentID FROM employee) AS 
myEmployee INNER JOIN department ON 
department .id = myEmployee.departmentID INNER JOIN branch ON 


branch.id = department .branchID 
WHERE branch.name = 'New York' AND age < 30")) 


while (query.next ()) 


( 
aqDebug() << query.value(0) .toString() << 
query.value (1) .toString() << 
query.value (2) .toString() << query.value(3).toString(); 


) 


else 


( 


aDebug() << query.lastError() .text (); 


qDebug() << "An"; 


) 


13. Then, add this function which counts the total number of female employees in the 
dummy company: 


void countFemale() 


( 


qDebug() << "== Count female employees ============="; 


OSqlQuery query; 
if (query.exec ("SELECT COUNT (gender) FROM employee WHERE 
gender = 1")) 


( 


while (query.next ()) 


( 


agDebug() << query.value(0) .toString(); 
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) 


else 


( 


aDebug () << query.lastError() .text (); 


qDebug() << "An"; 


) 


14. Once you're done with that, we will add another function, which filters the employee 
list and only displays those who have name that starts with Ja: 


void filterName() 


( 


aDebug() << "== Employees name start with 'Ja' ============="; 


OSglQuery query; 
if (query.exec ("SELECT name FROM employee WHERE name 
LIKE 'sJas'")) 


while (query.next ()) 


( 


gDebug() << query.value(0) .toString(); 


) 


else 


( 


aDebug () << query.lastError() .text (); 


qDebug() << "An"; 


) 


15. Next, we also add another function, which displays employees who have their 
birthdays in August: 


void filterBirthday () 


( 


aDebug() << "== Employees birthday in August ============="; 


OSglQuery query; 
if (query.exec ("SELECT name, birthday FROM employee WHERE 
MONTH (birthday) = 8")) 


( 


while (query.next ()) 


( 
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aDebug() << query.value(0) .toString() << 
query.value (1) .toDate () .toString("d-MMMM-yyyy") ; 


) 


else 


( 


aDebug () << query.lastError() .text (); 


qDebug() << "An"; 


) 


16. Then, we add the last function, which checks who logged in to the dummy system on 
27 April 2016 and displays their names on the terminal: 


void checkLog() 


aDebug() << "== Employees who logged in on 27 April 2016 


OSqlQuery query; 

if (query.exec ("SELECT DISTINCT myEmployee.name, FROM 
(SELECT id, name FROM employee) AS myEmployee INNER JOIN 
user ON user.employeeID = myEmployee.id INNER JOIN log ON 
log.userID = user.id WHERE DATE (log.loginTime) = 
12016-04-27'")) 


while (query.next ()) 


( 


agDebug() << query.value(0) .toString(); 


) 


else 


( 


aDebug () << query.lastError() .text (); 


qDebug() << "An"; 
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17. Lastly, in our main () function, connect our program to the MySQL database and 
call all the functions that we have defined in the previous steps. After that, close 
the database connection and we're done: 


int main(int argc, char *argvl]) 


( 


QCoreApplication alargc, argv); 


OSglDatabase db = OSgqlDatabase: :addDatabase ("QOMYSQL"); 
db.setHostName ("127.0.0.1"); 

db.setUserName ("reonyx") ; 

db.setPassword ("reonyx"); 

db.setDatabaseName ("testing"); 


if (db.open()) 


filterAge(); 
getDepartmentAndBranch (); 
filterBranchAndAge (); 
countFemale(); 
filterName(); 
filterBirthday(); 
checkLog(); 


db.close(); 


) 


else 


( 


gqDebug() << "Failed to connect to database."; 


return a.exec(); 
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18. Compile and run the project now and you should see a terminal window, which 
displays the filtered results from the database as defined earlier: 


A” CAQtTools1OtCreatoribiniqtcreator_process_stub.exe =- O X 


How it works... 


A console application does not have any GUI at all and only shows you a text display in 

a terminal window. This is usually used in a backend system, as it uses fewer resources 
compared to a widget application. We use it in this example because it's faster to display the 
result without the need to place any widgets in the program, which we don't need in this case. 


We separated the SQL queries into different functions so that it's easier to maintain the code 
and it doesn't become too messy. Do note that in C++, the functions have to be located before 
the main () function, or they will not be able to be called by main (). 


There's more... 


The INNER JOIN statement used in the preceding example joins two tables together and 
selects all rows from both tables, as long as there is a match between the columns in both 
tables. There are many other types of JOIN statement that you can use in MySQL (and some 
other types of SQL architecture), such as LEFT JOIN, RIGHT JOIN, FULL OUTER JOIN, 
and so on. The following diagram shows the different types of JOIN statements and their 
effects: 
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SQL JOINS 


SELECT <select_list> SELECT <select_list> 
FROM TableA A FROM TableA A 

LEFT JOIN TableB B RIGHT JOIN TableB B 
ON A.Key = B.Key ON A.Key = B.Key 


SELECT <select_list> 
FROM TabicA A 

INNER JOIN TableB B 
ON A.Key = B.Key 


SELECT <select_list> SELECT <select_list> 
FROM TablcA A FROM TableA A 

LEFT JOIN TableB B RIGHT JOIN TableB B 
ON A.Key = B.Key ON A.Key = B.Key 
WHERE B.Key IS NULL WHERE A.Key IS NULL 


SELECT <select_list> 
SELECT <sclect_list> FROM TablcA A 
FROM TabicA A FULL OUTER JOIN TableB B 
FULL OUTER JOIN TableB B ON A.Key = B.Key 
ON A.Key = B.Key WHERE A.Key 15 NULL 

CL Mofatt, 2008 OR B.Key 18 NULL 


1. The LIKE statement is normally used to search for a string variable in the database 
without the full word. Notice that there are two % symbols, located before and after 
the search keyword. 


2. The DISTINCT statement used in the previous example filters out results that have 
the exact same variable. For example, without the DISTINCT statement, you will see 
two versions of Larry King appear in the terminal because there are two records of 
him logging in to the system on the same day. By adding the DISTINCT statement, 
MySQL will eliminate one of the repeating results and ensure every result is unique. 


3. You may be wondering what d-MMMM-yyyy stands for and why we used it in the 
preceding example. That is actually an expression supplied to the ODateTime 
class in Qt to display the date time result using a given format. In this case, it will 
change the date time data that we get from MySQL, 2016-08-06, to the format 
that we specified, resulting in 6-August -2016. For more information, check out 
Qt's documentation at http: //doc.qt.io/qt-5/gqgdatetime.htmlittoString, 
which has the full list of expressions that can be used to determine the format of the 
date and time string. 
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Application Using 
Qt Web Engine 


In this chapter, we will cover the following recipes: 


» Introduction to Qt WebEngine 

»  WebView and web settings 

»  Embedding Google Maps in your project 
» Calling C++ functions from JavaScript 


» Calling JavaScript functions from C++ 


Introduction 


Qt includes a module called Qt WebEngine that allows us to embed a web browser widget into 
our program and use it to display web pages or local HTML contents. Prior to version 5.6, Qt 
used another similar module called Qt WebKit, which is now deprecated and has since been 
replaced by the Chromium-based web engine module. Qt also allows communication between 
JavaScript and C++ code through the "web channel", which enables us to make use of this 
module in a much more effective fashion. 
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Introduction to Qt WebEngine 


In this example project, we will explore the basic features of the web engine module in 
Qt and try building a simple working web browser. Since Qt 5.6, Qt's WebKit module has 
been deprecated and replaced by the WebEngine module, which is based on Google's 
Chromium engine. Note that when this chapter was written, WebEngine was still heavily 
under development and may be subject to changes in the near future. 


How to do it... 


First, let's set up our web engine project: 


1. First, you are required to download and install Microsoft Visual Studio if you do not 
have it installed on your computer. This is because at the moment, Qt's WebEngine 
module only works with the Visual C++ compiler and not others, such as MinGW or 
Clang. This might change in the future, but it all depends on whether Google wants 
to make their Chromium engine support other compilers or not. Meanwhile, you can 
download the latest Visual Studio from here: https: //www.visualstudio.com. 


2. Atthe same time, you may also need to make sure that the Qt you installed on your 
computer supports the Visual C++ compiler. You can add the mvc2015 component 
to your Qt installation using Qt's maintenance tool. Also, make sure that you have 
installed the Qt WebEngine component in your Qt as well: 


€ Qt 5.6.0 Setup 


Select Components 


Please select the components you want to install. 


| Qt 5.6.0 
This component will occupy 
approximately 2.65 GiB on your hard 
disk drive. 


vn 


Qt Carivas 3D 
% 

Qt WebEngine 

OD (TP 


[Y] Qt Labs Controls (TP) 
Y] Qt SerialBus (TP) 

Qt Script (Deprecated) 
Tools 


K 


Select Al — | | Deselect All 


Next Cancel 


www.it-ebooks.info 


Chapter 9 


3. Once you are done with that, open up Qt Creator and create a new Qt Widgets 
Application project. This time, you must select a kit that uses the Visual C++ compiler: 


Xx 
€ El OtWidgets Application 
Kit Selection 
Location 
E» kits Qt Creator can use the following kits for project WebEngine_Basic: 
dois [m] Select all kits 
Summary 
[O 2 Android for armeabi-v7a (GCC 4.9, Qt 5.5.1) Details Y 
O E Desktop Qt 5.5.1 MinGW 32bit Details Y 
mu ul Desktop Qt 5.6.0 MSVC2013 64bit Details Y 
El Desktop Qt 5.6.0 MSVC2015 64bit Details Y 


4. Afterthat, open up your project file ( . pro) and add the following modules to 
your project: 


QT += core gui webengine webenginewidgets 


5. Open Up mainwindow.ui and remove the menuBar, mainToolBar, and 
statusBar objects, as we don't need those in this project: 


Object Class 

Y MainWindow QMainWindow 
centralWidget [|] QWidget 
mainToolBar OToolBar Promote to ... 
statusBar OStatusBa 
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6. Place two horizontal layouts on the canvas, then place a line edit widget and a push 
button for the layout at the top: 


| 


| 2 D 
| B PushButton E 
l] D 


7. After that, select the canvas and click on the Lay Out Vertically button located at the 
top of the editor: 


Lay Out Vertically 


8. Once you have clicked on the Lay Out Vertically button, the layouts will expand and 
follow the size of the main window. The line edit will also expand horizontally based 
on the width of the horizontal layout: 


" " " 
Go 

" 7] 

" - . 
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10. 


11. 


12. 


13. 


14. 


Next, add two buttons to the left side of the line edit. We'll use these two buttons to 
move back and forward between page histories. Then, add a Progress bar widget at 
the bottom of the main window so that we can find out whether the page has finished 
loading, or loading is still in progress. We don't have to worry about the horizontal 
layout in the middle at this point, as we'll be adding the web view to it later using C++ 
code, and the space will then be occupied: 


. - . 
< > Go 
A 4 

_— 20% 
- - - 


Right-click on one of the buttons and select Go to slot..., then select clicked() and 
click OK. A slot function will be automatically created for you in mainwindow.h and 
mainwindow.cpp. Repeat this step for all the other buttons as well. 

After that, right-click on the line edit and select Go to slot..., then select 
returnPressed() and click OK. Another slot function will now be automatically 
created for you in mainwindow.h and mainwindow.cpp. 

Now that we are done with our Ul design, let's hop over to mainwindow.h. The first 
thing we need to do is to add the following header to mainwindow. h: 


Hinclude <QtWebEngineWidgets/QtWebEngineWidgets> 


Then, declare loadUrl1 () function under the class destructor: 


public: 
explicit MainWindow(QWidget *parent = 0); 
-MainWindow () ; 


void loadUrl (); 


After that, add a custom slot function called loading () to mainwindow.h as we!'ll 
be using it pretty soon: 
private slots: 

void on goButton _clicked(); 
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15. 


16. 


17. 


18. 


void on address returnPressed/(); 
void on backButton_clicked(); 
void on forwardButton clicked(); 
void loading (int progress); 


Lastly, declare a OWebEngineVi ew object and call it webview: 
private: 
Ui::MainWindow *tui; 


QWebEngineView* webview; 


Once you're done with that, open Up mainwindow. cpp and initiate the web engine 
view. Then, add it to the second horizontal layout and connect its loadProgress () 
signal to the loading () slot function we just added to mainwindow. h: 


MainWindow: :MainWindow(QWidget *parent) 
OMainWindow (parent), 
ui (new Ui: :MainWindow) 


ui->setupui (this); 


webview = new QWebEngineView; 
ui->horizontalLayout_2->addWidget (webview) ; 


connect (webview, SIGNAL (loadProgress(int)), 
SLOT (loading (int))); 
) 


After that, we declare what will happen when the loadUrl1 () function is called: 


void MainWindow::loadUrl () 


( 


QUrl url = QUrl (ui->address->text ()); 
url.setScheme ("http"); 
webview->page () ->load (url); 


) 


Next, call the loadUrl1 () function when the Go button is clicked or when the 
Return/Enter key is clicked: 


void MainWindow::on goButton_clicked () 


( 


loadqUrl (); 


void MainWindow::on address returnPressed () 


( 


loaqUrl (); 
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19. As for the other two buttons, we'll ask the web view to load the previous page or the 
next page if it is available in the history stack: 


void MainWindow: :on backButton clicked() 


( 


webview->back () ; 


) 


void MainWindow: :on_forwardButton_clickea () 


( 


webview->forward(); 


) 


20. Lastly, change the value of the progressBar when the web page is being loaded: 


void MainWindow: :loading(int progress) 


( 


ui->progressBar->setValue (progress); 


) 


21. Build and run the program now and you will get a very basic but functional 


web browser! 


E] MainWindow 


packtpub.com 


[RACK] a E 
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The old web view system was based on Apple's WebKit engine and only available in Qt 5.5 

and its predecessor. Since 5.6, WebKit has been completely abandoned by Qt and replaced 
with Google's Chromium engine. The API has been completely changed and therefore all the 
code related to Qt WebKit will not work correctly once migrated to 5.6. If you're new to Qt, 

it's recommended to skip WebKit and learn the WebEngine API since it is becoming the new 
standard in Qt. If you have used Qt's WebKit in the past, this web page teaches you how to 
port your old code over to WebEngine, https: //wiki.qt.io/Porting from OtWebKit_ 
to _OtWebEngine. 


In Step 16, we connected the loadProgress () signal that belongs to the web view widget 
to the loading () slot function. The signal will be called automatically when the web view ¡is 
loading the web page you requested by calling OwebEnginePage: : load () in Step 17. You 
can also connect the loadStarted () and loadFinished () signals as well if you need to. 


In Step 17, we used the QUrl1 class to convert the text obtained from the line edit to URL 
format. By default, the address we inserted will lead to the local path if we do not specify the 
URL scheme (http, https, ftp, and so on). We may not be able to load the page if, say, we 
gave it packtpub.cominstead of http: //packtpub. com. Therefore, we manually specify 
a URL scheme for it by calling QUrl : : setScheme (). This will ensure the address is properly 
formatted before passing it to the web view. 


If you're running Qt 5.6 or above and for some reason you need the WebKit module for your 
project (usually for maintaining an old project), you can obtain the module code from GitHub 
and build it by yourself: 


https: //github.com/gt/qtwebkit 


WebView and web settings 


In this section, we will dive deeper into the features available in Qt's WebEngine and explore 
the settings that we can use to customize our WebView. We will use the source files from the 
previous example and add more code to it. 
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How to do it... 


Let's explore some of the basic features of the Qt WebEngine: 


1. 


First of all, open up mainwindow.ui and add a vertical layout under the progress 
bar. Then, add a Plain Text Edit widget (under the input widget category) and a Push 
button to the vertical layout. Change the display of the Push button to Load HTIML 
and set the plaintext property of the plain text edit widget to the following: 
<Img src="https://www.google.com/images/ 
branding/googlelogo/1x/googlelogo_color_272x92dp.png"> 
</img> 
<hl1l>Hello World!</h1> 
<h3>This is our custom HTML page.</h3> 


<script>alert ("Hello!") ¡</script> 


<Img src="https: //www.google.comfimages/branding/googlelogo/1x/ 
googlelogo_color_272x92dp.png*></fimg> 

<h1>Hello World! </h1> 

<h3>This is our custom HTML page. </h3> 


<script>alert("Hello!”); </script> 


Load HTML 
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2. Next, go to File | New File or Project. A window will then pop up and ask you to 
choose a file template. Select Qt Resource File under the Qt category and click on 
the Choose... button. Type in your desired filename and click Next followed by Finish. 


[7 New File Xx 
Choose a template: All Templates + 
Files and Classes ) Qtitem Model Creates a Qt Resource file (.grc). 
C++ _) Qt Designer Form Class 
Qt _) Qt Designer Form 

GLSL _J QtResource File 

_) QML File (Qt Quick 1) 
_) QML File (Qt Quick 2) 
_) QtQuick Ul File 


Ú JS File 


Supported Platforms: Desktop Android 


General 
Java 


Python 


Cancel 


3. After that, open up the resource file we just created by right-clicking on it in the 


Projects pane and selecting the Open in Editor option. Once the file is opened by the 
editor, click on the Add button, followed by Add Prefix. Then, set the prefix as / and 
click Add, followed by Add Files. This time, the file browser window will appear and 
we will select the tux.png image file and click Open. We have now added the image 


file to our project, where it will be embedded into the executable file (. exe) once 
it's compiled: 


Y 


A tux.png 


Add Y Remove Remove Missing Files 
Properties 


Alias: 
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Next, open Up mainwindow.h and add the following headers to it: 


Hinclude <OMainWindow> 

tinclude <QtWebEngineWidgets/QtWebEngineWidgets> 
tinclude <QDebug> 

ftinclude <QFile> 


Then, make sure the following functions and pointers have been declared in 
mainwindow.h: 


public: 
explicit MainWindow(QWidget *parent = 0); 
-MainWindow () ; 
void loadUrl (); 


private slots: 
void on goButton clicked(); 
void on address returnPressed/(); 
void on backButton clicked(); 
void on forwardButton clicked(); 


void startLoadingí(); 
void loading (int progress); 
void loaded (bool ok); 


void on loadHtml clicked(); 
private: 
Ui::MainWindow *+tui; 


QWebEngineView* webview; 


Once you're done with that, open Up mainwindow.cpp and add the following code to 
the class constructor: 


MainWindow: :MainWindow(QOWidget *parent) 
OMainWindow (parent), 
ul (new Uli: :MainWindow) 


ui->setupui (this); 


webview = new QWebEngineView; 
ui->horizontalLayout_2->addWidget (webview) ; 


/ /webview->page () ->settinggs () > 

setAttribute (QWebEngineSettings::JavascriptEnabled, false); 
/ /webview->page () ->settings () 

->setAttribute (QOWebEngineSettings: :AutoLoadImages, false); 


[255] 
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//QString fontFamily = webview->page () ->settings () 

->fontFamily (QOWebEngineSettings::SerifFont); 

OString fontFamily = webview->page () ->settings () 

->fontFamily (QOWebEngineSettings::SansSerifFont); 
int fontSize = webview->page () ->settings () 

->fontSize (QWebEngineSettings: :MinimumFontSize); 
QFont myFont = QFont (fontFamily, fontSize); 
webview->page () ->settings () - >setFontFamily 

(QWebEngineSettings::StandardFont, myFont.family()); 


QFile file("://tux.png"); 
if (file.open(QFile::ReadOnly)) 
( 
QOByteArray data = file.readAll/(); 
webview->page () ->setContent (data, "image/png"); 
) 


else 


( 


agDebug() << "File cannot be opened."; 


connect (webview, SIGNAL (loadStarted()), 
SLOT (startLoading())); 


connect (webview, SIGNAL (loadProgress (int)), 
SLOT (loading (int))); 
connect (webview, SIGNAL (loadFinished (bool)), 
SLOT (loaded (bool1))); 
) 


7. The MainWindow: :loadUrl () function still remains the same as the previous 
example, which sets the URL scheme to http before loading the page: 


void MainWindow::loadUrl () 


( 


QUrl url = QUrl (ui->address->text ()); 
url.setScheme ("http"); 
webview->page () ->load (url); 


) 


8. The same goes for the following functions, which also remain the same: 


void MainWindow::on goButton clicked () 


( 


loadUrl (); 
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void MainWindow: :on address returnPressed () 


( 


loadUrl (); 


void MainWindow::on backButton _clicked() 


( 


webview->back (); 


void MainWindow: :on forwardButton _clicked () 


( 


webview->forward (); 


) 
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In the previous example, we only had MainWindow: : loading (), which sets the 
value of the progress bar when the web page is being loaded. This time, we also 
added both the MainWindow: : startLoading() and MainWindow: : loaded () 
slot functions, which will be called by the loadStarted () and loadFinished () 
signals. What these two functions do is basically show the progress bar when a page 
is starting to load, and hide the progress bar when the page has finished loading; 


void MainWindow: :startloading() 


( 


ui->progressBar->show(); 


) 


void MainWindow::loading(int progress) 


( 


ui->progressBar->setValue (progress); 


) 


void MainWindow:: loaded (bool ok) 


( 


ui->progressBar->hide(); 


) 


Lastly, we call webview->loadHtml () to convert the plain text to HTML content 


when the Load HTML button is clicked: 


void MainWindow: :on_loadHtml_clicked() 


( 


webview->setHtml (ui->source->toPlainText ()); 
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11. Build and run the program now and you should see something like this: 


E) MainWindow = OB Xx qu 


< > Go Go 


Gooale 


E] Javascript Alert - about:b.... X 


T Hello! 
Hello Work 4 *"- 
This is our custom 
<Img src="https: /fwww.google.comfimages/branding/googlelogo/1xf/ A | <Img src="https: //www.google.comfimages/branding/googlelogo/1x/ A 


googlelogo_color_272x92dp.png"></img> 
<h1>Hello World! </h1> 
<h3>This is our custom HTML page. </h3> 


googlelogo_color_272x92dp.png”></img> 
<h1>Hello World! </h1> 
<h3>This is our custom HTML page. </h3> 


Load HTML Load HTML 


In this example, we used C++ to load an image file and set it as the WebView's default content 
(instead of a blank page). We could achieve the same result by loading a default HTML file 
with an image at startup. 


Some of the code in the class constructor has been commented out. You can remove the 
double slashes / / and see the difference it makes—the JavaScript alert will no longer appear 
(since JavaScript is being disabled) and any images will no longer appear in your web view. 


Another thing you can try is to change the font family from QOWebEngineSettings: :SansS 
erifFont to OWebEngineSettings: : SerifFont. You will notice a slight difference in the 
font as it appears in the web view: 


E] MainWindow | E] MainWindow = [m] 
de | < > 
Hello Hello 


Hello Hello 


By clicking the Load HTML button, we ask the WebView to treat the content of the plain text 
edit widget as HTML code and load it as an HTML page. You can use this to make a simple 
HTML editor powered by Qt! 


Load HTML 
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Embedding Google Maps in your project 


In this example, we will learn how to embed Google Maps in our project through Qt's 
WebEngine module. This example doesn't focus much on Qt and C++, but rather on 
the Google Maps API in HTML code. 


How to do it... 


Let's create a program that displays Google Maps by following these steps: 
1. First, create a new Qt Widgets Application project and remove the status bar, menu 
bar, and tool bar. 


2. Then, open up your project file (. pro) and add the following modules to your project: 
QT += core gui webengine webenginewidgets 
3. Next, open Up mainwindow.ui and add a vertical layout to the canvas. Then, select 


the canvas and click the Lay Out Vertically button on top of the canvas. You will get 
something like this: 


u p m | Object Class 
Y MainWindow QMainWindow 
w = centralWidget [|] QWidget 
= vert..yout = QVBoxLayout 


4. Then, open Up mainwindow.cpp and add the following headers to the top of the 
source code: 


Hinclude <QtWebEngineWidgets/QWebEngineView> 
Hinclude <QOtWebEngineWidgets/QWebEnginePage> 
Hinclude <QtWebEngineWidgets/QWebEngineSettings> 
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5. 


After that, add the following code to the MainWindow constructor: 


MainWindow: :MainWindow(QOWidget *parent) 
QOMainWindow (parent), 
ui (new Ui: :MainWindow) 


ui->setupui (this); 

QWebEngineView* webview = new QWebEngineView; 
QUrl url = QUrl ("qrc:/map.html"); 
webview->page () ->load (url); 
ui->verticalLayout->addWidget (webview) ; 


) 


Then, go to File | New File or Project and create a Qt resource file (. qrc). We will 
add an HTML file to our project called map.html: 


Iv 5/ 


e, map.html 


Once you're done with that, open up map. html with your favorite text editor. It's not 
recommended to open an HTML file using Qt Creator, as it does not provide any color 
coding for HTML syntax. 


After that, we will start writing the HTML code by declaring the important tags, such 
as <html>, <head>, and <body>, like so: 


<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body ondragstart="return false"> 
</body> 
</html> 
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9. Then, add a <div> tag to the body and set its ID as map-canvas: 


<body ondragstart="return false"> 
<div id="map-canvas" /> 
</body> 


10. After that, add the following code to the head of the HTML document: 
<meta name="viewport" content="initial-scale=1.0, 

user-scalable=no" /> 

<style type="text/css"> 

html [ height: 100% ) 

body [ height: 100%; margin: 0; padding: 0 ) 

Hmap-canvas [ height: 100% ) 

</style> 


<script type="text/javascript" 
src="https://maps.googleapis.com/maps/api/3s? 
key=YOUR_KEY HERESlibraries=drawing"></script> 


11. Then, add the following code, also to the head of the HTML document, right at the 
bottom of the code we inserted in the previous step: 


<script type="text/javascript"> 
var map; 
function initialize() 
// Add map 
var mapOptions = 


center: new google.maps.Latlng 
(40.705311, -74.2581939), 


zoom: 6 


map = new google.maps.Map 
(document .getElementByld 
("map-canvas") mapOptions); 


// Add event listener 


google.maps.event.addListener (map, 
"zoom _changed', function() 


( 


//alert (map .getZoom()); 


»; 
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// Add marker 
var marker = new google.maps.Marker ( 
( 
position: new google.maps.LatLng 
(40.705311, -74.2581939), 
map: map, 
title: "Marker A", 
Di 
google.maps.event .addListener 
(marker, 'click', function() 


, 
map.panTo (marker .getPosition()); 
»D; 


marker.setMap (map) ; 


// Add polyline 

var points = [ new google.maps.LatLng 
(39.8543, -73.2183), new google.maps. 
LatIng (41.705311, -75.2581939), new 
google.maps.LatlIng(40.62388, -75.5483) 


var polyOptions = 
( 

path: points, 
strokeColor: 'fFFO000', 
strokeOpacity: 1.0, 
strokeWeight: 2 
Y; 
historyPolyline = new 
google.maps.Polyline (polyOptions)'; 


historyPolyline.setMap (map) ; 


// Add polygon 
var points = [ new google.maps.LatLng 
(37.314166, -75.432), 


new google.maps.LatlLng(40.2653, -74.4325), 


1; 


new google.maps.Latlng(38.8288, -76.5483) 


var polygon = new google.maps.Polygon ( 


paths: points, 

fillColor: "H000000', 

fillOpacity: 0.2, 

strokeWeight: 3, 

strokeColor: 'Hf£ff000', 
Di 


polygon.setMap (map) ; 


1; 
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// Setup drawing manager 
var drawingManager = 

new google.maps.drawing.DrawingManager () ; 
drawingManager .setMap (map) ; 


) 


google.maps.event . addDomListener 
(window, 'load', initialize); 


</script> 


12. Once you're done with that, compile and run the project. You should see something 
similar to this: 


E] MainWindow EA 


rurusr , pa 

uy Di 

55 Map Satellite To MEA ICA 
¡Ochester”” AS 


“Hamilton k 7 o 


PENNSA 


Google allows you to embed Google Maps in a web page by using their JavaScript library 
called the Google Maps API. Through Qt's WebEngine module, we can embed Google Maps 
in our C++ project by loading a HTML file to our web view widget, which uses the Google 
Maps API. The only downside of this method is that we cannot load the map when there 

is no Internet connection. 
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Google allows your website to call any Google API, many thousands of times per day. If you 
plan for heavier traffic, you should get a free API key from Google. Go to https: //console. 
developers .google.comto get a free key and replace the word YOUR_KEY HERE in the 
JavaScript source path with the API key you obtained from Google. 


We must define a <div> object, which serves as a container for the map. Then, when we 
initialize the map, we specify the ID of the <div> object so that the Google Maps API knows 
which HTML element to look for when embedding the map. 


By default, we set the center of the map to the coordinates of New York and set the default 
zoom level to 6. Then, we added an event listener that gets trigsgered when the zoom level of 
the map changes. Remove the double slashes / / from the code to see it in action. 


After that, we also added a marker to the map through JavaScript. The marker also has an 
event listener attached to it, which will trigger the panTo () function when the marker is 
clicked. What it does is basically pan the map view to the marker that has been clicked. 


Although we have added the drawing manager to the map (the icon buttons beside the Map 
and Satellite buttons), which allows users to draw any type of shape on top of the map, it's 
also possible to add the shapes manually using JavaScript, similar to how we added the 
marker in the previous step. 


Lastly, you may have noticed that the headers are added to mainwindow.cpp instead of 
mainwindow. h. This ¡is totally fine unless you are declaring class pointers in mainwindow. h; 
then you have to include those headers in it. 


Calling C++ functions from JavaScript 


In this recipe, we will learn how put our knowledge to use and create a functional login screen 
using Qt and MySQL. 


How to do it... 


Learn how to call C++ functions from JavaScript through the following steps: 


1. First, create a Qt Widgets Application project and, once you're done, open up the 
project file (. pro) and add the following modules to the project: 
QT += core gui webengine webenginewidgets 


2. Then, open Up mainwindow.ui and delete the tool bar, menu bar, and status bar, 
as we don't need any of these in this example program. 


www.it-ebooks.info 


Chapter 9 


3. After that, add a vertical layout to the canvas, and then select the canvas and click on 
the Lay Out Vertically button on top of the canvas. Then, add a text label to the top 
of the vertical layout and set its text to Hello!. Also, make its font bigger by setting its 


stylesheet property: 
font: 75 26pt "MS 


Shell Dlg 2"; 


He 


llo! 


4. Next, goto File | New File or Project and create a resource file. Then, add an empty 
HTML file and all the JavaScript files, CSS files, font files, and so on belonging to 


jQuery, Boostrap, and Font Awesome to your project resources: 


< 
A 


- MARA Ea mea > 


html/test.html 
html/css/bootstrap.css 
html/css/bootstrap.css.map 
html/css/bootstrap.min.css 
html/css/bootstrap-theme.css 
html/css/bootstrap-theme.css.map 
html/css/bootstrap-theme.min.css 
html/css/custom.css 
html/css/font-awesome.css 
html/css/font-awesome.min.css 


html/fonts/FontAwesome.otf 
Add y Remove Remove Missing Files 
Properties 
Prefix: 1 
Language: 
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5. After that, open up your HTML file, which in this case is called test . html. First, link 
all the necessary JavaScript and CSS files to the HTML source code, between the 
<head> tags: 


<!DOCTYPE html> 
<html> 
<head> 
<script src="qrc:///gqtwebchannel /qwebchamnel .js"></script> 


<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.js"></script> 


<link rel="stylesheet" type="text/css" 
href="css/bootstrap.css"> 


<link rel="stylesheet" type="text/css" href="css/font- 
awesome.css"> 


</head> 

<body> 

</body> 
</html> 


6. Then, add the following JavaScript to the <head> element, wrapped between the 
<script> tags 
<script> 
$ (document) . ready (function () 


( 


new QWebChannel (qt .webChannelTransport, 
function (channel) 


( 


mainWindow = channel .objects.mainWindow; 


P; 


S("*login").click(function (e) 


( 


e.preventDefault (); 


var user = $("Husername").val(); 
var pass = S("Hpassword").val(); 
mainWindow.showLoginInfo(user, pass); 


»; 


S("HchangeText").click (function (e) 


( 


e.preventDefault (); 
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mainWindow.changeQtText ("Good bye!"); 
»; 
»; 


</script> 


Then, add the following code to the <body> element: 


<div class="container-fluid"> 


<form id="example-form" action="f" class= 
"container-fluid"> 


<div class="form-group"> 


<div class="col-md-12"><h3>Call C++ Function 
from Javascript</h3></div> 


<div class="col-md-12"><div class="alert 
alert-info" role="alert"> 

<i class="fa fa-info-circle"></i> 

<span id="infotext">Click "Login" to send 
username and password variables to C++. 
Click "Change Cpp Text" to change the text 
label on Qt GUI.</span></div></div> 


<div class="col-md-12"> 
<label >Username:</label> 
<input id="username" type="text"><p /> 


</div> 


<div class="col-md-12"> 
<label>Password:</label> <input id= 
"password" type="password"><p /> 


</div> 


<div class="col-md-12"> 
<button id="login" class="btn btn-success" 
type="button"><i class="fa fa-check"></1i> 
Login</button> <button id="changeText" 
class="btn btn-primary" type="button"> 
<i class="fa fa-pencil"></i> 
Change Cpp Text</button> 
</div> 
</div> 
</form> 


</div> 
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8. Once you are done with that, let's open up mainwindow.h and add the following 
public functions to the MainWindow class: 
public: 
explicit MainWindow(QWidget *parent = 0); 
-MainWindow () ; 


Q_INVOKABLE void changeQtText (QString newText); 
Q_INVOKABLE void showLoginInfo/(QString user, 
QString pass); 


9. After that, open Up mainwindow.cpp and add the following headers to the top of 
the source code: 


Hinclude <QtWebEngineWidgets/QWebEngineView> 
Hinclude <OtWebChannel /QWebChannel > 
Hinclude <QOMessageBox> 


10. Then, add the following code to the MainWindow constructor: 


MainWindow: :MainWindow(QWidget *parent) 
OMainWindow (parent), 


ui (new Ui: :MainWindow) 
qputenv ("QTWEBENGINE REMOTE DEBUGGING", "1234"); 
ui->setupui (this); 


QWebEngineView* webview = new QWebEngineView(); 
ui->verticalLayout->addWidget (webview) ; 


QWebChannel* webChannel = new QWebChannel (); 
webChannel ->registerObject ("mainWindow", this); 
webview->page () - >setWebChannel (webChannel) ; 


webview->page () - >load (QUrl ("qrc:///html/test.html")); 


) 


11. After that, we will declare what happens when changeQt Text () and 
showLoginInfo () are called: 


void MainWindow: :changeQtText (OString newText) 


( 


ul->label->setText (newText) ; 
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void MainWindow: :showLoginInfo(OString user, QOString pass) 
OMessageBox: :information(this, "Login info", "Username 
is "+ user + " and password is " + pass); 


Let's compile and run the program now; you should see something similar to 

the following screenshot. If you click on the Change Cpp Text button, the word Hello! 
at the top will change to Goodbye! If you click on the Login button, a message box 
will appear and show you exactly what you typed in the Username and Password 
input fields: 


E] MainWindow = [m] x 


Hello! 


Call C++ Function from Javascript 


8 Click "Login" to send username and password variables to C++. Click 
"Change Cpp Text" to change the text label on Qt GUI 


Username: 


Password: 


4 Change Cpp Text 


In this example, we used two JavaScript libraries, ¡Query and Boostrap. We also used an iconic 
font package called Font Awesome. These third-party add-ons were used to make the HTML 
user interface more interesting and responsive to different screen resolutions. We also used 
¡Query to detect the document's ready status, as well as to obtain the values of the input 
fields. You can download ¡Query from https : / /jquery . com/download, Bootstrap from 
http: //getbootstrap.com/getting-started/tdownload, and Font Awesome from 
http: //fontawesome.io. 


Qt's WebEngine uses a mechanism called Web Channel that enables peer-to-peer 
communication between the C++ program and the HTML page. The WebEngine module 
provides a JavaScript library that makes the integration a lot easier. The JavaScript is 
embedded in your project's resource by default, so you don't need to import it into your 
project manually. You just have to include it in your HTML page by calling the following: 


<script src="gqrc:///qtwebchannel/qwebchannel .js"></script> 
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Once you have included qwebchannel .3s, you can initialize the OWebChannel class and 
assign the Qt object we registered earlier in C++ to a JavaScript variable. 


In C++, itas follows: 


QWebChannel* webChannel = new OWebChannel (); 
webChannel ->registerObject ("mainWindow", this); 
webview->page () - >setWebChannel (webChannel) ; 


Then in JavaScript, it is as follows: 


new QWebChannel (qt .webChannelTransport, function(channel) 


( 


mainWindow = channel .objects.mainWindow; 


y; 
You may be wondering what this line means: 


qputenv ("QTWEBENGINE REMOTE DEBUGGING", "1234"); 


Qt's web engine uses the remote debugging method to check for JavaScript errors and other 
problems. The number 1234 defines the port number you want to use for remote debugging. 
Once you have enabled remote debugging, you can access the debugging page by opening 
up a Chromium-based web browser, such as Google Chrome (this will not work in Firefox and 
other browsers) and typing in http://127.0.0.1:1234. You will then see a page that look 
like this: 


> 127.0.0.1:1234 


Inspectable pages 


qrc:///html/test html 
grc-///html/test.html 


The first page will display all the HTML pages that are currently running in your program, which 
in this case is test. html. Click on the page link and it will take you to another page for 
inspection. You can use this to check for CSS errors, JavaScript errors, missing files, and so 
on. Note that you should disable remote debugging once your program is bug-free and ready 
for deployment. This is because remote debugging takes time to initiate and it will increase 
your program's startup time. 
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If you want to call a C++ function from JavaScript, you must place the Q_ INVOKABLE macro in 
front the function's declaration; otherwise, it will not work: 


Q INVOKABLE void changeQtText (OString newText); 


Calling JavaScript functions from C++ 


In the previous example, we have learned how to call C++ functions from JavaScript through 
Qt's Web Channel system. In this example, we will try to do the reverse: call JavaScript 
functions from C++ code. 


How to do it... 


We can call JavaScript functions from C++ through the following steps: 


1. As usual, create a new Qt Widgets Application project and add the webengine and 
webenginewidgets modules to your project. 


Then, open Up mainwindow.ui and remove the tool bar, menu bar, and status bar. 


After that, add a vertical layout and a horizontal layout to the canvas. Then, select the 
canvas and click Lay Out Vertically. Make sure the horizontal layout is located at the 
bottom of the vertical layout. 


4. Add two push buttons to the horizontal layout; one is called Change HTML Text and 
the other one is called Play Ul Animation. Right-click on one of the buttons and 
click Go to slot.... A window will now pop up and ask you to pick a signal. Select the 
clicked() option and click OK. Qt will automatically add a slot function to your source 
code. Repeat this step for the other button as well: 


" " " 

" a. 
Change HTML Text Play UI Animation 

" - . 
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5. 


Now, open Up mainwindow.h and add the following headers to it: 


Hinclude <OtWebEngineWidgets/QWebEngineView> 
Htinclude <OtWebChannel /QWebChannel > 
Hinclude <QMessageBox> 


Then, declare the class pointer of a OWebEngineView object called webview: 
public: 

explicit MainWindow(QWidget *parent = 0); 

-MainWindow () ; 


QWebEngineView* webview; 


After that, open Up mainwindow.cpp and add the following code to the 
MainWindow constructor: 


MainWindow: :MainWindow(QOWidget *parent) 
OMainWindow (parent), 
ui (new Ui: :MainWindow) 


//qputenv (" OTWEBENGINE_ REMOTE DEBUGGING", "1234"); 
ui->setupui (this); 


webview = new QOWebEngineView(); 
ui->verticalLayout->addWidget (webview) ; 


QWebChannel* webChannel = new QWebChannel (); 
webChannel ->registerObject ("mainWindow", this); 
webview->page () - >setWebChannel (webChannel) ; 


webview->page () ->1load (QUrl1 ("qrc:///html/test.html")); 


) 


Then, define what will happen when the changeHtml Text button and the 
playUlAnimation button are clicked: 


void MainWindow::on changeHtmlTextButton clicked() 


( 


webview->page () ->runJavaScript ("changeHtmlText (' Text 
has been replaced by C++!');"); 


void MainWindow::on playUlAnimationButton _clicked() 


( 


webview->page () ->runJavaScript ("startAnim();"); 
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Once you're done with that, let's create a resource file for our project by going to File 
| New File or Project. Then, select Qt Resource File under the Qt category and click 
Choose. Then, insert your desired file name and click Next, followed by Finish. 


Then, add an empty HTML file and all the required add-ons (¡Query, Bootstrap, and 
Font Awesome) to our project resources. Also, add the tux. png image file to the 
resources file as well, as we'll be using it in a short while. 


After that, open up the HTML file we just created and add it to the project resources, 
in our case, it's called test . html. Then, add the following HTML code to the file: 


<!DOCTYPE html> 
<html > 
<head> 


<script src="gqrc:///qtwebchannel /qwebchannel .j]s"> 
</script> 


<script src="js/jquery.min.js"></script> 
<script src="3js/bootstrap.j]s"></script> 


<link rel="stylesheet" type="text/css" 
href="css/bootstrap.css"> 


<link rel="stylesheet" type="text/css" href="css/ 
font-awesome.css"> 


</head> 

<body> 

</body> 
</html> 


12. Add the following JavaScript code, which is wrapped within the <script> tags, to the 


<head> element of our HTML file: 


<script> 
$ (document) .ready (function () 
( 
$("fHtux").css([ opacity:0, width:"0%", 
height: "0%" )); 
S ("Hlistgroup").hide(); 
S ("Hlistgroup2").hide(); 


new QWebChannel (qt .webChannelTransport, 
function(channel) 


( 


mainWindow = channel .objects.mainWindow; 
Pi 
Pi 
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function changeHtmlText (newText) 


( 


S("Hinfotext").html (newText); 


function startAnim() 
( 
// Reset 
S("ftux").css([ opacity:0, width: "0%", 
height: "0%" )); 
S ("Hlistgroup").hide(); 
S("*listgroup2").hide(); 


$ ("Htux") .animate (( opacity:1.0, width: "100%", 
height:"100%" ), 1000, function() 
// tux animation complete 


S("Hlistgroup").slideDown(1000, 
function () 
( 


// listgroup animation complete 
S("Hlistgroup2").fadeln(1500); 


</script> 


13. Lastly, add the following code to the <body> element of our HTML file: 


<div class="container-fluid"> 
<form id="example-form" action="f*" class="container- 
fluid"> 
<div class="form-group"> 


<div class="col-md-12"><h3>Call Javascript Function 
from C++</h3></div> 


<div class="col-md-12"><div class="alert alert- 
info" role="alert"><i class="fa 
fa-info-circle"></i> <span id="infotext"> 
Change this text using C++.</span></div></div> 


<div class="col-md-2"> 
<img id="tux" src="tux.png"></img> 
</div> 
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<div class="col-md-5"> 
<ul id="listgroup" class="list-group"> 
<li class="list-group-item">Cras justo 


odio</li> 
<li class="list-group-item">Dapibus ac 
facilisis in</li> 
<li class="list-group-item">Morbi leo 
risus</li> 
<li class="list-group-item">Porta ac 
consectetur ac</li> 
<li class="list-group-item">Vestibulum at 
eros</li> 
</ul> 
</div> 


<div id="listgroup2" class="col-md-5"> 
<a href="*" class="list-group-item active"> 
<h4 class="list-group-item-heading"> 
Item heading</h4> 
<p class="list-group-item-text"> 
Cras justo odio</p> 
</a> 
<a href="*" class="list-group-item"> 
<h4 class="list-group-item-heading"> 
Item heading</h4> 
<p class="list-group-item-text"> 
Dapibus ac facilisis in</p> 
</a> 
<a href="*" class="list-group-item"> 
<h4 class="list-group-item-heading"> 
Item heading</h4> 
<p class="list-group-item-text"> 
Morbi leo risus</p> 
</a> 


</div> 


</div> 
</form> 


</div> 
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14, Build and run the program now; you should get a similar result to that shown in 
the following screenshot. When you click on the Change HTML Text button, the 
information text is located within the top panel. If you click on the Play Ul Animation 
button, the penguin image alongside the two sets of widgets will appear one after the 
other, with different animations: 


E] MainWindow 


Call Javascript Function from C++ 


O Text has been replaced by C++! 


ll o 
Cras justo odio Item heading 
Cras justo odio 
Dapibus ac facilisis in 


Item heading 
Morbi leo risus Dapibus ac facilisis in 
Porta ac consectetur ac Item heading 
Morbi leo risus 
Vestibulum at eros 
Change HTML Text Play UI Animation 


This example is similar to the previous one. Once we have included the Web Channel 
JavaScript library and initiated the OWebChannel class, we can call any of the JavaScript 
functions from C++ by calling webview->page () ->runJavascript ("jsFunctionNameH 
ere () ;"). Don't forget to apply the web channel created in C++ to the WebView's page 

as well; otherwise, it will not be able to communicate with the OwebChannel class in your 
HTML file. 


By default, we change the CSS properties of the penguin image and set its opacity to 0, 
width to 0%, and height to 0%. We also hide the two list groups by calling the ¡Query function 
hide (). When the Play Ul Animation button is clicked, we repeat the same steps again just 
in case the animations have been played before (the same button has been clicked before), 
then we hide them again in order for the animations to be replayed. 
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One powerful feature of ¡Query is that you can define what happens after an animation is 
done, which allows us to play the animations in sequence. In this example, we started with the 
penguin image and interpolated its CSS properties to a targeted setting within a second (1000 
milliseconds). Once that's done, we start another animation, which makes the first list group 
slide from top to bottom in 1 second. After that, we run the third animation, which makes the 
second list group fade in from nowhere within 1.5 seconds. 


To replace the information text located in the top panel, we created a JavaScript function 
called changeHtmlText () and within the function itself, we got the HTML element by 
referring to its ID and calling html () to change its contents. 
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